[완료]IE에서 동적으로 class 속성을 추가하는게 안되나요?
글쓴이: exsider / 작성시간: 화, 2007/10/16 - 6:20오후
제가 웹페이지를 만드는데 특정 엘리먼트에 javascript를 이용하여 class 속성을 붙이고
css 를 이용하여 겉모양을 설정합니다.
그런데 이게 firefox 에서는 잘 되는데 IE에서는 안됩니다.
class 속성을 설정할 때 setAttribute 메소드를 쓰는데 혹시 IE 에서는 방법이 다른가요?
테스트용 코드를 올려봅니다. 제대로 동작하면 created 글자에도 테두리가 생겨야합니다.
(저는 IE6에서 테스트했습니다.)
<html> <head> <style type="text/css"> .deco { border : 1px solid black ; } </style> </head> <body> <span class="deco"> abcde </span> <div id="aaa"></div> <script type="text/javascript"> var elem = document.getElementById('aaa'); var new_elem = document.createElement("span") ; var txt = document.createTextNode("created") ; new_elem.appendChild(txt) ; elem.appendChild(new_elem) ; new_elem.setAttribute("class" , "deco") ; </script> </body> </html>
Forums:
element.setAttribute('class',
element.setAttribute('class', 'asdf') 대신 element.className = 'asdf'로 하세요.
일반적으로 DOM에 이미 정의된 속성은 get/setAttribute 메소드를 쓰지 않습니다.
감사합니다.
감사합니다. 말씀하신대로 해보니 잘 되네요.
그리고 추가질문이 있는데요, 저는 id 속성을 설정할 때도 setAttribute를 썼는데 이건 잘 동작하더군요.
id 도 element.id 처럼 사용하는게 더 좋은가요?
흠, 아마도요.
흠, 아마도요.
원칙적으로
원칙적으로 get/setAttribute를 써야하는것이 당연합니다.
일반적으로 el.value, el.src, el.id 이런식의 방법은 초창기 HTML DOM 시절의 방식이고요.
지금은 get/setAttribute를 사용하라고 권장하고 표준으로 정해져있습니다.
물론 el.value, el.src 이렇게 속성으로 직접접근하는것이 표준이 아니라는것은 아닙니다.
IE에서는 setAttribute가 제대로 동작하지 않습니다. IE버그죠
대표적으로 class만해도
setAttribute('class', 'ttt') 이렇게 하는것이 올바른방법인데
IE에서는 setAttribute('className', 'ttt') 이렇게 해줘야 동작하지만
이렇게 될경우 다른 브라우저 모두는 정상적으로 작동하지 않습니다.
그래서 자주쓰는 class속성의 경우는 el.className (모든브라우저에서 작동)을 사용하셔야 하고요
그외에는 이왕이면 setAttribute를 사용하세요.
댓글 달기