개체의 내용을 색상을 변경시켜 흑백으로 디스플레이하는 효과를 준다.

Script object.style.filter=(propVal)'
HTML <ELEMENT style="filter:(propVal)">
Xray 필터 예제(클릭)
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

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


애트리뷰트 속성 설명
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
특기

BasicImage 필터로 더 효과적인 낼 수 있다.

적용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에서 필터 속성 예제


Xray 필터 예제
필터 표시창
<SCRIPT>
var aColors=new Array('pink','red','yellow','black','aqua','green','blue','brown','teal','white');
idx=0;
var clickBut=false;
function doPlay(){
    divObj.style.color=aColors[(idx++)%aColors.length];
  if (clickBut){
    clickBut=false;
  } else {
    clickBut=true;
  }
  str='divObj.style.filter='+divObj.style.filter+', ';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'),<BR>';
  str+='divObj.style.color=(<SPAN class=clrBox  style=background:black;color:'+divObj.style.color+'>'+divObj.style.color+'</SPAN>=';
  str+='<SPAN class=clrBox  style=background:white;color:'+divObj.style.color+'>'+divObj.style.color+'</SPAN>)';
  show.innerHTML=str;
}
</SCRIPT>
<STYLE>.clrBox{padding:5;padding-bottom:2;padding-top:2;font-weight:bold;font-size:120%}</STYLE>
<DIV id="divObj"
 style="width:494;height:100;font-size:40;line-height:1.2em;color:pink;font-weight:bold;border:solid 3;padding=5;margin:5;
  filter:Xray();">
<IMG src=../../gif/rfexample.gif width=100><BR>
Xray 필터 예제
</DIV>
<BUTTON onclick="doPlay()" style="width:500">필터 효과를 위해 클릭해 보라</BUTTON>
<DIV id=show style="width:500;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>