JavaScript 属性を新規作成・削除する
新規に属性を作成するには、「document.createAttribute()」メソッドを使います。パラメータには作成する属性名を文字列で指定します。「document.createAttribute()」は作成した属性をオブジェクトとして返します。属性に値を設定するにはnodevValueプロパティにアクセスします。属性を削除するには、対象となる要素の「removeAttribute()」メソッドを使います。パラメータには削除する属性名を文字列で指定します。
<body>
<script>
window.addEventListener("load" , function(){
var paragraph = document.getElementsByTagName("p")[0];
document.getElementById("createBtn").addEventListener("click",function(){
//align属性を作成
var attr = document.createAttribute("align");
//align属性rightを割り当て
attr.nodeValue = "right";
//段落に属性を設定
paragraph.setAttributeNode(attr);
}, false);
//削除ボタンにイベントを割り当て
document.getElementById("deleteBtn").addEventListener("click",function(){
paragraph.removeAttribute("align");
}, false);
}, false);
</script>
<p>サンプルテキスト</p>
<from>
<input type="button" id="createBtn" value="属性を作成">
<input type="button" id="deleteBtn" value="属性を削除">
</from>
</body>
align属性を作成ボタンをクリックすると、p要素に「align」属性が設定、値が「right」になり、p要素内の文字は右揃えになります。
align属性を削除ボタンをクリックすると、p要素のalign属性が削除され、p要素内の文字はデフォルトの左揃えになります。
