[완료]IE에서 동적으로 class 속성을 추가하는게 안되나요?

exsider의 이미지

제가 웹페이지를 만드는데 특정 엘리먼트에 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>
7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

element.setAttribute('class', 'asdf') 대신 element.className = 'asdf'로 하세요.
일반적으로 DOM에 이미 정의된 속성은 get/setAttribute 메소드를 쓰지 않습니다.

exsider의 이미지

감사합니다. 말씀하신대로 해보니 잘 되네요.

그리고 추가질문이 있는데요, 저는 id 속성을 설정할 때도 setAttribute를 썼는데 이건 잘 동작하더군요.
id 도 element.id 처럼 사용하는게 더 좋은가요?

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

흠, 아마도요.

s의 이미지

원칙적으로 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를 사용하세요.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.