【JavaScript】 DOM:属性要素の削除 removeAttribute
2007.05.23 Author: たわばがに
ということで、前回に引き続き、JavaScriptのDOMスクリプティングネタです。
前回は cloneNode に関して取り上げましたが、
今回は属性要素の削除に使う removeAttribute について書いてみました。
まずは毎度おなじみ、サンプルから。
これを実際にセットしてみました。
(ページ表示の関係上、ちょっと仕様を変えてありますが、根本は変わりません)
ボタンをクリックして↓の変化を見てみてください(2秒おきに状態が変化します(4回まで))。
1. 文字の色が赤→黒
2. 文字の太さがボールド→ノーマル
3. フォントのサイズが16pt→デフォルト(9ptくらい?に)
4. 背景色がグレー→なし
上記、1~4の変化が確認できたかと思います。
これはセットしたstyle属性を順々に解除(削除)することで、実現しています。
サンプルの各関数で実行されているremoveAttributeの行が、その実行部分です。
setAttributeでセットした属性要素は、このremoveAttributeで解除することができます。
画面表示を動的に変えたりする際に、不必要なstyle要素が存在する場合等、
使える場面はかなりあるかと思います。
以上、偏ったDOMネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
前回は 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システム開発・ネットワーク構築会社 コネクティボへ