개체의 내용을 그림자 진 것처럼 변형하여 새로운 내용으로 표현한다.

Script object.style.filter='{progid:DXImageTransform.Microsoft.](propVal)'
HTML <ELEMENT style="filter:{progid:DXImageTransform.Microsoft.](propVal)">
필터 효과
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

progid:DXImageTransform.Microsoft. 부분은 생략이 가능하나 속성과 효과가 다소 다를 수 있다.


애트리뷰트 속성 설명
color Color 필터에 적용되는 색상값을 반환하거나 설정한다.
direction Direction 필터 효과가 나는 방향을 시계방향의 각도로 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
strength Strength 필터 효과를 내는 거리를 픽셀 단위로 반환하거나 설정한다.
특기
적용style
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, hn, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, plainText, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성 예제


Shadow 필터 예제
필터 표시창
<SCRIPT>
function doPlay(){
  divObj.filters[0].Strength=20;
  divObj.filters[0].Apply();
  if (divObj.filters[0].Color=='blue'){
    bgB=divObj.filters[0].Direction=45;
    divObj.filters[0].Color='red';
  } else {
    bgB=divObj.filters[0].Direction=135;
    divObj.filters[0].Color='blue';
  }
  divObj.filters[0].Play();
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='Color=('+divObj.filters.item(0).Color+'), ';
  str+='Direction=('+divObj.filters(0).Direction+'), ';
  str+='Strength=('+divObj.filters(0).Strength+'), ';
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj" style="height:100;width:500;font-size:40;line-height:1.2em;color:yellow;padding:9;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=blue,direction=135);">
<IMG src=../../gif/rfexample.gif width=100><BR>
Shadow 필터 예제
</DIV>
<BUTTON onclick="doPlay()" style="width:600">필터 효과를 위해 클릭해 보라</BUTTON>
<DIV id=show style="width:600;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>