HTML DOM setAttributeNode()メソッド
DOM setAttributeNode()メソッドは、パラメーターで指定された属性をHTMLドキュメントの指定された要素に設定し、その値をAttrノードオブジェクトとして返します。
構文
以下は構文です-
node.setAttributeNode(attributeNode);
例
setAttributeNode()メソッドの例を見てみましょう-
<!DOCTYPE html> <html> <head> <style> html{ height:100%; } body{ text-align:center; color:#fff; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height:100%; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:35%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } </style> </head> <body> <h1>DOM setAttributeNode() method Demo</h1> <p>Hi! I'm a para element in HTML with some random text</p> <button onclick="set()" class="btn">Set Attribute</button> <script> function set() { var p=document.querySelector("p"); var attr=document.createAttribute("style"); attr.value="color:#db133a;font-size:1.2rem;"; p.setAttributeNode(attr); } </script> </body> </html>
出力
これにより、次の出力が生成されます-
「属性の設定」をクリックします 」ボタンをクリックして、スタイル属性を
要素に設定します。
-
HTML DOM hasAttributes()メソッド
HTML DOM hasAttributes()メソッドは、要素に属性があるかどうかをチェックします。要素に属性が含まれている場合はtrueを返し、含まない場合はfalseを返します。このメソッドが要素ノード以外のノードで呼び出された場合、戻り値は常にfalseになります。 構文 以下は、hasAttribbutes()メソッドの構文です- node.hasAttributes() 例 hasAttributes()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>hasAttributes(
-
HTML DOM focus()メソッド
HTML DOM focus()メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例:タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur()メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> input[type=text]:focus, p: