cutmail's blog

write the code

IEでsetAttributeでclassが定義できない件について

javascript

なんでクラスが変わらないのかなーと思っていろいろ調べてみたら、
IEはDOMオブジェクトのプロパティと属性をごっちゃにしているらしい。

つまり、
こう書いても

<style type="text/css">
.hoge {
  background-color:red;
}
</style>

<body>
   <span class="hoge">hogeクラスの中身</span>
</body>
<script type="text/javascript">
　var span = document.body.appendChild(document.createElement('span'));
  span.innerHTML='クラスが適用されない。';
  span.setAttribute('class', 'hoge');
</script>

追加した要素にhogeクラスは適用されない。

だが、

<style type="text/css">
.hoge {
  background-color:red;
}
</style>

<body>
   <span class="hoge">hogeクラスの中身</span>
</body>
<script type="text/javascript">
　var span = document.body.appendChild(document.createElement('span'));
  span.innerHTML='classが適用される。';
  span.className = 'hoge';
</script>

こういう風に書くと適用された。

IEの仕様ってどうなってるんだ。