【JavaScript】 DOM:属性要素の削除 removeAttribute

2007.05.23 Author: たわばがに

ということで、前回に引き続き、JavaScriptのDOMスクリプティングネタです。

前回は cloneNode に関して取り上げましたが、
今回は属性要素の削除に使う removeAttribute について書いてみました。

まずは毎度おなじみ、サンプルから。
<script type="text/javascript">
<!--
window.onload = function() {
    o = document.createElement("div");
    o.setAttribute("id", "hoge070523");
    o.getAttribute("hoge070523");
    o.style.setAttribute("backgroundColor", "#eeeeee");
    o.style.setAttribute("color",      "#ff0000");
    o.style.setAttribute("fontSize",   "16pt");
    o.style.setAttribute("fontWeight", "bold");
    o.innerHTML = "りんご";
    document.getElementById("div070523").appendChild(o);
    // 色設定解除
    setTimeout("removeColor()", 2000);
    // 文字の太さ設定解除
    setTimeout("removeFontWeight()", 4000);
    // フォントの大きさ設定解除
    setTimeout("removeFontSize()", 6000);
    // 背景色設定解除
    setTimeout("removeBackground()", 8000);
}
// 色設定解除
function removeColor() {
    document.getElementById("hoge070523").style.removeAttribute("color");
}
// 文字の太さ設定解除
function removeFontWeight() {
    document.getElementById("hoge070523").style.removeAttribute("fontWeight");
}
// フォントの大きさ設定解除
function removeFontSize() {
    document.getElementById("hoge070523").style.removeAttribute("fontSize");
}
// 背景色設定解除
function removeBackground() {
    document.getElementById("hoge070523").style.removeAttribute("backgroundColor");
}
//-->
</script>
<div id="div070523">
</div>


これを実際にセットしてみました。
(ページ表示の関係上、ちょっと仕様を変えてありますが、根本は変わりません)
ボタンをクリックして↓の変化を見てみてください(2秒おきに状態が変化します(4回まで))。


1. 文字の色が赤→黒
2. 文字の太さがボールド→ノーマル
3. フォントのサイズが16pt→デフォルト(9ptくらい?に)
4. 背景色がグレー→なし

上記、1~4の変化が確認できたかと思います。
これはセットしたstyle属性を順々に解除(削除)することで、実現しています。
サンプルの各関数で実行されているremoveAttributeの行が、その実行部分です。
setAttributeでセットした属性要素は、このremoveAttributeで解除することができます。

画面表示を動的に変えたりする際に、不必要なstyle要素が存在する場合等、
使える場面はかなりあるかと思います。

以上、偏ったDOMネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ