HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcreateAttribute()メソッドの使い方を解説

HTML DOMのcreateAttribute()メソッドは、JavaScriptを使ってHTML要素に新しい属性を作成するためのメソッドです。指定した名前の属性を生成し、その属性をAttrオブジェクトとして返します。

構文

createAttribute()メソッドの構文は以下のとおりです。

document.createAttribute(attributename)

サンプルコード

ここで、HTML DOMのcreateAttribute()メソッドの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CREATE ATTRIBUTE</title>
<style>
   #DIV1{
      margin-top:15px;
      width:250px;
      height:200px;
      border:2px solid blue;
      background-color:lightgreen;
   }
</style>
</head>
<body>
<p>ボタンをクリックすると、div要素に「class」属性が作成されます</p>
<button onclick="attrCreate()">CREATE</button>
<br>
<div>
<p>これはサンプルのdivです</p>
</div>
<script>
   function attrCreate() {
      var x = document.getElementsByTagName("div")[0];
      var att = document.createAttribute("id");
      att.value = "DIV1";
      x.setAttributeNode(att);
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOMのcreateAttribute()メソッドの使い方を解説

CREATEボタンをクリックすると、次のように変化します。

HTML DOMのcreateAttribute()メソッドの使い方を解説

コードの解説

上記の例では、まずid「DIV1」を持つスタイルを定義しています。

#DIV1{
   margin-top:15px;
   width:250px;
   height:200px;
   border:2px solid blue;
   background-color:lightgreen;
}

次に、内部に<p>要素を含む<div>要素を作成しています。

<div>
<p>これはサンプルのdivです</p>
</div>

さらに、ユーザーがクリックするとattrCreate()関数を実行するCREATEボタンを配置しています。

<button onclick="attrCreate()">CREATE</button>

attrCreate()関数の処理内容は以下のとおりです。まず、documentオブジェクトのgetElementsByTagName()メソッドを使って<div>要素を取得し、変数xに代入します。続いて、createAttribute()メソッドで「id」属性を作成し、valueプロパティを使って値「DIV1」を設定します。この「DIV1」は、先ほど定義したスタイルのidに該当します。最後に、setAttributeNode()メソッドで「id」属性とその値を<div>要素に適用しています。

function attrCreate() {
   var x = document.getElementsByTagName("div")[0];
   var att = document.createAttribute("id");
   att.value = "DIV1";
   x.setAttributeNode(att);
}

このように、createAttribute()メソッドとsetAttributeNode()メソッドを組み合わせることで、JavaScriptから動的にHTML要素へ属性を追加できます。ボタンをクリックするとdiv要素にid属性が付与され、事前に定義しておいたスタイルが自動的に適用される仕組みです。


  1. HTML DOMのflexGrowプロパティとは？構文と使い方をサンプルコード付きで解説

    flexGrowプロパティとは？HTML DOMのflexGrowプロパティは、フレックスコンテナの中で各要素（フレックスアイテム）が余ったスペースをどの割合で受け取って伸びるかを設定するためのプロパティです。値には単位を付けない数値を指定します。構文flexGrowプロパティをJavaScriptから設定する場合は、次のような構文を使用します。object.style.flexGrow = number|initial|inheritそれぞれの値の意味は以下のとおりです。number … 他の要素と比べて、その要素がどれだけ伸びるかを示す数値。デフォルト値は0です。initial … プロパ

  2. HTML DOMスタイルのflexFlowプロパティの使い方を徹底解説

    HTML DOMのスタイルにおけるflexFlowプロパティは、要素のflexDirection（フレックスアイテムの方向）とflexWrap（折り返しの可否）をまとめて指定するためのプロパティです。これら2つのプロパティに対するショートハンド（一括指定）として機能し、記述した順序に従って値が適用されます。flexFlowプロパティの構文flexFlowプロパティを設定する際の基本的な構文は以下の通りです。object.style.flexFlow = flex-direction flex-wrap|initial|inherit;指定できる値の一覧flexFlowプロパティに設定できる各値