Style 요소 다루기 3
../

1 / 2 / 3

버젼 4의 두 브라우저에서 Style 요소의 DOM 이름이 다른것이 있고 그 값도 조금씩 다르게 표현을 합니다. 이 다른 것이 있지만 브라우저에 따라서 지원하지 않는 요소도 많습니다. 이 지원하는 요소의 양은 ie4가 nn4보다 더 많이 지원합니다. 그리고 가장 나쁜것은 지원하는 것도 제대로 지원하지 못하는 경우입니다.

어떤 글자의 색을 바꿀때, 사용할 수 있는 요소가 color style 요소입니다. 그래서 ie4에서는 아래의 구문으로 글자 색을 바꿀수 있습니다. 

<B onMouseOver = "this.style.color = 'aqua'">글자</b>
"글자" 로 됩니다. 왼쪽의 "글자" 위에 마우스를 올리면 ie4는 글자의 색이 'aqua' 색으로 됩니다. 하지만, nn4에서는 페이지 구성물 자체의 구성을 바꿀수 있는 직접적인 방법은 지원하지 않습니다. 할 수 있는 방법은 내용물을 레이어에 넣고 레이어.document.write(), 레이어.document.close() 로 구성물을 바꾸어 주어야 합니다. 
<div id=D1>"글자"</div>
<script>
function ch() {
document.D1.document.write("<span style='color: aqua'>글자</span>")
document.D1.document.close()
}
document.D1.onmouseover = ch
</script>
로 바꾸어 주어야 합니다. 근데, 이것의 성능이 무척 떨어집니다. 많은 내용물을 바꾸면 특히, mouseover, mouseout 같은 여러번 일어나는 이벤트에서는 브라우저를 다운시킬 수 있습니다. 그래서, 방법이 별로 없습니다. 다른 방법을 사용하여 비슷하게 할 수 있지만 번거롭습니다.

앞 페이지에 예를 계속들면 레이어의 바탕색만 바꾸었는데 바탕그림의 style도 있습니다. 바로 background-image: url(이미지.jpg)의 형식으로 지정하는 것입니다. 

<div id=M1 style="position:absolute; width:300px; border: outset 4px blue;
	background-image: url(이미지1.jpg)"
>MOUSEOVE, MOUSEOUT</div>
	
<script>
if(document.all) {
	document.all.M1.onmouseover = 
		new Function("this.style.backgroundImage = '이미지2.jpg'")
}
else if(document.layers) document.M1.onmouseover = 
	new Function("this.background.src = '이미지2.jpg'")
</script>
로 background-image style 요소를 DOM의 요소인 backgroundImage로 지정하면 원래의 바탕그림인 '이미지1.jpg'를 '이미지2.jpg'로 바꾸어야 하지만 nn4는 아예 지원하지 않고 바탕색의 "bgColor"처럼 "backgroundImage"로 사용하지 않고 단순히 "background" 로 사용합니다. style 로 사용하지 않고 <LAYER>택의 'SRC' 속성을 다루는 식으로 동작시켜야 합니다. 그런데, ie4에서는 위의 코드로 시험해 보면 ie4가 다운됩니다. (한글판 ie4.71 + 한글 win95)

이런것 처럼 지원하지 않고 지원해도 잘못나오는 경우가 있습니다. 그러므로 항상 시험해야 합니다. style의 개념이 복잡하지는 않지만 아직까지는 BUG가 많이 있고 이들을 다루는 DOM의 구조도 많이 다르기 때문입니다.

직접 작성해도 이런데 DHTML을 지원하는 edit로 만든 페이지는 과연 어떨까요.. 자신의 개인 페이지를 만든다면 사용할 수도 있을것입니다. 하지만. Pro를 지향한다면 오늘도 내일도 edit는 대안이 될 수 없을 것입니다.

1 / 2 / 3



T O P