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

HTML DOM createAttribute（）メソッド

HTML DOM createAttribute（）メソッドは、HTML要素にJavaScriptを使用して特定の属性を作成するために使用されます。 createAttribute（）メソッドは、指定された名前で属性を作成し、その属性を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>Click the button to create a "class" attribute for the div element</p>
<button onclick="attrCreate()">CREATE</button>
<br>
<div>
<p>This is a sample 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（）メソッド

[作成]ボタンをクリックすると-

HTML DOM createAttribute（）メソッド

上記の例では-

IDが「DIV1」のスタイルを作成しました

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

次に、内部に

要素を持つ

要素を作成しました。

<div>
<p>This is a sample div</p>
</div>

次に、ユーザーがクリックしたときにattrCreate（）関数を実行するボタンCREATEを作成しました-

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

attrCreate（）関数は、ドキュメントオブジェクトのgetElementsByTagName（）メソッドを使用して

要素を取得し、それを変数xに割り当てます。 createAttribute（）メソッドを使用して「id」属性を作成し、そのvalueプロパティを使用して、前に作成したスタイルのIDである値「DIV1」を割り当てます。最後に、「id」属性とその値を
要素-

に設定します。 
function attrCreate() {
   var x = document.getElementsByTagName("div")[0];
   var att = document.createAttribute("id");
   att.value = "DIV1";
   x.setAttributeNode(att);
}

  1. HTMLDOMスタイルのflexGrowプロパティ

    HTML DOMスタイルのflexGrowプロパティは、要素がフレックス要素内でそのサイズに対応する比率を設定するために使用されます。単位のない数値を受け入れます。 以下は、-の構文です。 flexGrowプロパティの設定- object.style.flexGrow = "number|initial|inherit" ここで、numberは要素が他の要素に比例して大きくなる量を指定し、そのデフォルト値は0です。initialはプロパティ値をデフォルト値に設定し、inheritはそれを親プロパティ値に設定します。 flexGrowプロパティの例を見てみましょう-

  2. HTMLDOMスタイルのflexFlowプロパティ

    HTML DOMスタイルのflexFlowプロパティは、要素のflexDirectionプロパティとflexWrapプロパティを指定するために使用されます。これはflexDirectionとflexWrapの省略形であり、同じ順序で値を受け入れます。 以下は、-の構文です。 flexFlowプロパティの設定- object.style.flexFlow = "flex-direction flex-wrap|initial|inherit" 上記の特性は次のように説明されます- 値 説明 フレックス方向 フレキシブルアイテムの方向を指定するた