Style 요소 다루기 2

1 / 2 / 3

DHTML을 접근하는 방법이 ie4, nn4 두 브라우저에서 다릅니다. nn4는 css-p, layer 택으로 접근하는 반면에 ie4는 모든 택으로 접근할 수 있습니다. nn4의 css-p 만으로도 ie4에서 지원하는 거의 대부분의 효과를 낼 수 있습니다. 중요한 것은 다른 방식으로 사용하고 이들 이벤트와 요소의 값도 조금씩 다릅니다. 이벤트는 "이벤트" 페이지에서 충분히 설명을 해놓았습니다. 다시보니 수정해야 할 곳이 많지만 넉넉할 것입니다. 여기서는 요소만 다루죠..

Style에 지정한 모든 요소는 DOM의 계층을 따라서 JavaScript로 접근할 수 있습니다. 버젼 4의 두 브라우저에서 이 요소가 다른 이름인 게 조금 있고 초기값도 다르고 DOM으로 제어하면 오동작하는 JavaScript Property(요소)도 있습니다. 앞 페이지의 예를들면

<div id=M1 style="position:absolute; width:300px; border: outset 4px blue;"
>MOUSEOVE, MOUSEOUT</div>
	
<script>
if(document.layers) {
  document.M1.onmouseover = new Function("this.bgColor = 'red'")
  document.M1.onmouseout = new Function("this.bgColor = null")
}
else if(document.all) {
  document.all.M1.onmouseover = new Function("this.style.backgroundColor = 'red'")
  document.all.M1.onmouseout = new Function("this.style.backgroundColor = ''")
}
</script>

MOUSEOVER, MOUSEOUT

레이어 위로 20px씩 옮기기

로 마우스를 치우면 원래의 지정으로 돌아가게 nn4에서는 null을 지정하고 ie4에서는 공백으로 지정했습니다. 이것은 레이어의 바탕색을 지정하지 않은 처음의 상태로 돌립니다. 그래서, 투명한 바탕색으로 나옵니다. 위의 링크 "레이어 위로 20px씩 옮기기" 로 레이어를 다른 글자가 있는 것 위로 올리고 마우스를 올리고 치워보세요.. 바탕색이 투명하게 되어 밑의 글자가 보일것입니다.

background-color 로 지정할 수 있는 css 요소 중에서 'transparent' 가 있습니다. 바탕색을 지정하지 않으면 기본으로 지정되는 초기값입니다. 하지만, ie4, nn4에서는 지정하지 않으면 nn4는 'null'로 ie4는 공백('')으로 DOM의 구조를 지정합니다. 이런것처럼 각 style의 요소를 다루는 DOM이 다른것이 많이 있습니다. 아직 두 브라우저가 말로만 W3C의 권고 사항을 지키네 마네하지만 다 엉터리입니다.

ie4에서는 공백 대신에 'transparent'로 지정해도 투명한 색이 나옵니다.
"DOM의 요소값 확인하기"로 가서 각 Object의 내용물을 보세요. 기본값으로 제대로 나오는 것은 거의 없습니다. 주로 null 이나 공백으로 나옵니다.

이런 DOM의 지원과 두 브라우저에서의 공통된 지원도 다음판 브라우저에서는 해결이 되면 좋겠지만 아마 되지않을 것입니다. :)

1 / 2 / 3

T O P