KoXo 자바스크립트 - 필터(filter)

배경과 개체들의 색상을 점진적으로 적용하여 디스플레이 한다.

Script	object.style.filter='progid:DXImageTransform.Microsoft.Gradient(propVal)'
HTML	<ELEMENT style="filter:progid:DXImageTransform.Microsoft.gradient(propVal)">

Glow 필터 예제

인수

propVal : (속성 문자열): Gradient 필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.
progid:DXImageTransform.Microsoft. 부분은 생략이 불가능하다.

filter ⇒

Gradient 필터⇒

⇒

애트리뷰트	속성	설명
enabled	Enabled	필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
	EndColor	변환이 종료되는 위치에서의 색상의 수치값 문자열로 반환하거나 설정한다.
	EndColorStr	변환이 종료되는 위치에서의 색상을 정수로 반환하거나 설정한다.
	GradientType	변환 방향을 지정하는 정수를 반환하거나 설정한다. 1 수평, 0 수직.
	StartColor	변환이 시작되는 위치에서의 색상의 수치값 문자열로 반환하거나 설정한다.
startColorStr	StartColorStr	변환이 시작되는 위치에서의 색상을 정수로 반환하거나 설정한다.

특기

변환되는 개체에 텍스트 내용이 있으면 먼저 투명한 것으로 간주하여 변환한 후 적용된 색상으로 업데이트 된다.

적용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, FRAMESET, 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, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

filter ⇒

Gradient 필터⇒

⇒

DIV에서 Gradient 필터 속성 예제

Gradinet 필터 예제

필터 표시창

<SCRIPT>
var clickBut=false;
function doPlay(){
  divObj.filters[0].Apply();
  if (clickBut){
    clickBut=false;
    divObj.style.backgroundColor='pink';
  } else {
    clickBut=true;
    divObj.style.backgroundColor='maroon';
  }
  divObj.filters[0].Play();
  str='divObj.style.filter='+divObj.style.filter;
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj" style="height:200;width:400;background-color:pink;font-size:30;line-height:1.2em;color:blue;
  filter:progid:DXImageTransform.Microsoft.Gradinet(motion=forward,duration=5,gradientsize=.7);">
  <IMG src=../../gif/rfexample.gif width=100><BR>
Gradinet 필터 예제
</DIV>
<BUTTON onclick="doPlay()" style="width:400">필터 효과를 위해 클릭해 보라</BUTTON>
</DIV>
<DIV id=show style="height:20;font-size:14;border:solid 1 blue;padding:3;margin-left:3em;margin-right:3em">필터 표시창</DIV>

Gradinet 예제

GradinetWipe 예제

filter ⇒

Gradient 필터

⇒

최종 수정:
05/16/2025 00:40:02

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

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

Explorer10 부터 filter 기능이 지원되지 않는다는 점을 인식하시기 바랍니다.

DIV에서 document.write(fileName)Gradient 필터 속성 예제

DIV에서 Gradient 필터 속성 예제