객체 탐지를 사용하면 자바스크립트가 조건문에서 탐지된 객체에 접근한다.
예전 스크립트에서 많이 사용한 document.all을 검사하면 브라우저가 IE 4.x 버전 모델을 지원하는지를 알 수 있다.
그리고 document.layers를 검사하면 넷스케이프 네비게이터 4.x 버전 모델을 지원하는지 여부를 알 수 있다.
현재 사용되는 모든 브라우저는 매우 일관성 있는 모델을 지원한다.
즉, 모든 브라우저가 document.getElementById를 지원하며, 이는 특정 엘리먼트에 접근하는데 있어 매우 중요하다.
또한 엘리먼트의 CSS 스타일 프로퍼티들을 바꾸는 style 프로퍼티도 모든 브라우저가 지원한다.
예제에서는 opacity를 잠시 다뤄보도록 하겠다.
+ 참고
엘리먼트의 투명도는 opacity를 사용해 지정한다. 값은 % 단위.
마소는 alpha 필터를 통해 엘리먼트의 투명도를 동적으로 변경시키는 방법을 최초로 제시했다.
나중에 모질라는 이 필터를 변경하여 moz-opacity라 불리는 필터를 내놓았다.
그 쯤에 KHTML(사파리, 리눅스의 Konquerer)도 khtml-opacity라는 프로퍼티를 내놓았다.
그리고 CSS 3.0이 나오면서 모든 브라우저에서 opacity 프로퍼티를 사용할 수 있게 되었다.
최근의 사파리/모질라 계열 브라우저는 새로운 CSS 3 표준을 따른다.
하지만 마소는 그렇지 않다. (진짜 독과점 심한 놈들임. 빌 게이츠가 역시 독해 빠졌음.)
IE 7에서까지 꿋꿋하게 alpha 필터를 고집하고 있다. (IE 8은 잘 모르겠습니다.)
그래서 모든 브라우저에서 투명도를 지정하기 위해서는 객체 탐지가 필요하다.
예제) alpha 필터와 CSS opacity 중 어떤 것을 사용할 지 결정하기 위해 객체 탐지 사용.
<!-- script -->
//<![CDATA[
var opacity = 1.0;
document.onclick = adjustOpacity;
function adjustOpacity() {
opacity = opacity - 0.1;
var img = document.getElementById("img1");
if(img.style.filter) { // IE
img.style.filter = "alpha(opacity:"+(opacity*100)+")";
}
else if(img.style.opacity) { // IE except.
img.style.opacity = opacity;
}
else { // IE, FF except.
alert("Opacity not supported");
}
}
//]]>
<!-- body -->
<img id="img1" src="../images/menu_top.gif" style="opacity: 1.0; filter: alpha(opacity=100);"/>
예전 스크립트에서 많이 사용한 document.all을 검사하면 브라우저가 IE 4.x 버전 모델을 지원하는지를 알 수 있다.
그리고 document.layers를 검사하면 넷스케이프 네비게이터 4.x 버전 모델을 지원하는지 여부를 알 수 있다.
현재 사용되는 모든 브라우저는 매우 일관성 있는 모델을 지원한다.
즉, 모든 브라우저가 document.getElementById를 지원하며, 이는 특정 엘리먼트에 접근하는데 있어 매우 중요하다.
또한 엘리먼트의 CSS 스타일 프로퍼티들을 바꾸는 style 프로퍼티도 모든 브라우저가 지원한다.
예제에서는 opacity를 잠시 다뤄보도록 하겠다.
+ 참고
엘리먼트의 투명도는 opacity를 사용해 지정한다. 값은 % 단위.
마소는 alpha 필터를 통해 엘리먼트의 투명도를 동적으로 변경시키는 방법을 최초로 제시했다.
나중에 모질라는 이 필터를 변경하여 moz-opacity라 불리는 필터를 내놓았다.
그 쯤에 KHTML(사파리, 리눅스의 Konquerer)도 khtml-opacity라는 프로퍼티를 내놓았다.
그리고 CSS 3.0이 나오면서 모든 브라우저에서 opacity 프로퍼티를 사용할 수 있게 되었다.
최근의 사파리/모질라 계열 브라우저는 새로운 CSS 3 표준을 따른다.
하지만 마소는 그렇지 않다. (진짜 독과점 심한 놈들임. 빌 게이츠가 역시 독해 빠졌음.)
IE 7에서까지 꿋꿋하게 alpha 필터를 고집하고 있다. (IE 8은 잘 모르겠습니다.)
그래서 모든 브라우저에서 투명도를 지정하기 위해서는 객체 탐지가 필요하다.
예제) alpha 필터와 CSS opacity 중 어떤 것을 사용할 지 결정하기 위해 객체 탐지 사용.
<!-- script -->
//<![CDATA[
var opacity = 1.0;
document.onclick = adjustOpacity;
function adjustOpacity() {
opacity = opacity - 0.1;
var img = document.getElementById("img1");
if(img.style.filter) { // IE
img.style.filter = "alpha(opacity:"+(opacity*100)+")";
}
else if(img.style.opacity) { // IE except.
img.style.opacity = opacity;
}
else { // IE, FF except.
alert("Opacity not supported");
}
}
//]]>
<!-- body -->
<img id="img1" src="../images/menu_top.gif" style="opacity: 1.0; filter: alpha(opacity=100);"/>