setAttribute('class',*)でclass属性の属性値を変更できない

症状

setAttributeメソッド(setAttribute(name,value))でclass属性の属性値を設定するとき、第1引数に'class'を指定しても属性値を設定できない。しかし、第1引数を'className'にすれば属性値の設定ができる。

例示

<style type="text/css">
.a {
    font-size: 2em;
    color: red;
}
.b {
    font-size: 2em;
    color: blue;
}
-->
</style>
<script type="text/javascript">
<!--
function chgattr1() {
    var obj = document.getElementById('elem');
    if (obj.className == 'a') {
        obj.setAttribute('class', 'b');
    } else {
        obj.setAttribute('class', 'a');
    }
}
function chgattr2() {
    var obj = document.getElementById('elem');
    if (obj.className == 'a') {
        obj.setAttribute('className', 'b');
    } else {
        obj.setAttribute('className', 'a');
    }
}
</script>

<div class="a" id="elem">A</div>
<p><a href="javascript:chgattr1()">'class'で設定</a>/
<a href="javascript:chgattr2()">'className'で設定</a></p>

アンカーをクリックすると、それぞれの方法でclass属性を変更しようとします。

実行結果

第1引数に指定した内容別にclass属性の切り替えができたかを(適用スタイルが変化したかで)示しています。

UAclassclassName
Moz1.0×
WinIE6.0×
Opera6.03××

○:スタイル変化/×:スタイル変化せず

修正状況

WinIE6.0では'class'を指定することによる属性値設定はできません。

スポンサーリンク

関連記事

スポンサーリンク

br要素があるときに縦方向マージンを少なく解釈する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る