개체에 적용된 필터(filter)나 필터들의 컬렉션(filters)을 반환하거나 설정한다.

	Script	object.style.filter=[sVal]
	HTML	<ELEMENT style="filter:sVal;">
	CSS	cssSelector {filter:sVal;}

인수

cssSelector : (스타일 선택자)

filter 속성을 가질수 있는 엘레멘트(ELEMENT)나 클라스(class) 이름 혹은 인식자(id)이다.

sVal : (속성 문자열)

filter 스타일 속성은 개체에 적용된 필터(filter)나 필터들의 컬렉션(filters)을 나타내는 문자열이다.

filtertype1 (parameter1, parameter2,...)	등록된 필터이다.
filtertype2 (parameter1, parameter2,...)	등록된 필터이다.

이 속성은 읽기/쓰기이며 디폴트값은 없다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

필트가 표현되기 위해서는 개체는 배치(layout)를 가져여 한다. 배치를 갖게하기 위한 간단한 방법은 엘레멘트에 height 혹은/과 width 속성을 설정하는 것이다. 다른 방식으로 엘레멘트가 배치를 갖게하는 방법들이 있다. 추가적인 정보는 hasLayout 속성을 참조하라.

예를들어 이미지 모체 개체에 필터를 설정하므로서 img 개체에 Shadow 필터를 적용할 수 있다.

이 속성은 Macintosh 플랫크폼에서는 지원되지 않는다.

적용

개체	script	CSS	IE 버전
a	a.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
acronym	acronym.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
address	address.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
b	b.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
bdo	bdo.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
big	big.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
blockQuote	blockQuote.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
body	body.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
button	button.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
caption	caption.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
center	center.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
cite	cite.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
code	code.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
custom	custom.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
dd	dd.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
del	del.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
dfn	dfn.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
dir	dir.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
div	div.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
dl	dl.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
dt	dt.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
em	em.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
fieldSet	fieldSet.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
font	font.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
form	form.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
frame	frame.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
hn	hn.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
iFrame	iFrame.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
frameSet	frameSet.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
i	i.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
ins	ins.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
img	img.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
button	button.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
checkbox	checkbox.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
FileUpload	FileUpload.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
image	image.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
password	password.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
radio	radio.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
reset	reset.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
submit	submit.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
text	text.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
kbd	kbd.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
label	label.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
legend	legend.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
li	li.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
marquee	marquee.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
menu	menu.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
noBR	noBR.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
ol	ol.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
p	p.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
plainText	plainText.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
pre	pre.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
q	q.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
rt	rt.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
ruby	ruby.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
s	s.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
samp	samp.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
small	small.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
span	span.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
strike	strike.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
strong	strong.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
sub	sub.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
sup	sup.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
table	table.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
textArea	textArea.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
th	th.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
td	td.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
tt	tt.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
u	u.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
ul	ul.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
var	var.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)
xmp	xmp.style.filter[=sVal]	cssSelector{filter:sVal}	IE5(win32,ce)

참고

filter 목록

이 속성은 CSS(Cascading Style Sheets)의 부분에 포함시킬 것이 제안되었다.

style ⇒

filter 스타일속성⇒

<IMG id="imgObj" src="../../gif/flower.jpg" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=150)
  progid:DXImageTransform.Microsoft.BasicImage(mirror=2)" width="300px" border="0">
<BR>
<SCRIPT>
str='imgObj.filters.length='+imgObj.filters.length+'<BR>';
str+=imgObj.style.filter+'<BR>';
document.write(str)
</SCRIPT>

다시 시작

이미지를 클릭해보라.

<SCRIPT>
function doFilter(){
  filterFrom.filters.item(0).Apply();
  filterFrom.filters.item(0).Transition=12;
  imgOne.style.visibility='hidden';
  filterTo.style.visibility='';
  filterFrom.filters.item(0).play(10);
}
</SCRIPT>
<DIV id="filterFrom" onClick="doFilter()" style="position:absolute;width:300px;height:225px;filter:revealTrans()">
<IMG id="imgOne" style="position:absolute;width:300" src="../../gif/flower1.jpg">
<DIV id="filterTo" style="position:absolute;background:white;visibility:hidden;"></DIV>
</DIV>
<BUTTON style="position:relative"
  onclick="imgOne.style.visibility='';filterTo.style.visibility='hidden';doFilter()">다시 시작</BUTTON>

style ⇒

filter 스타일속성

⇒

최종 수정: 07/11/2025 10:46:25

All right reserved

비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요.

http://koxo.com/lang/js/style/filter.html