Element: setAttribute() メソッド

構文

setAttribute(name, value)

引数

name

値を設定する属性名を指定する文字列です。HTML 文書内の HTML 要素で setAttribute() を呼び出すと、属性名は自動的にすべて小文字に変換されます。

value

属性に割り当てる値を含む文字列です。文字列以外の値が指定された場合は、自動的に文字列に変換されます。

論理属性は要素に存在すれば true とみなされます。value には、空文字列または属性名を、前後にホワイトスペースを置かずに指定してください。実践的なデモは以下の例を参照してください。

指定された value は文字列に変換されるため、null を指定しても必ずしも期待通りになるとは限りません。属性を削除したり、その値を null に設定する代わりに、属性の値を文字列 "null" に設定します。属性を削除したい場合は、removeAttribute()を呼び出してください。

返値

なし (undefined)。

例外

InvalidCharacterError DOMException

name の値が有効な XML 名 でない場合に発生します。例えば、数値、ハイフン、ピリオドで始まっていたり、英数字、アンダースコア、ハイフン、ピリオド以外の文字が含まれていたりする場合です。

例

次の例では、setAttribute() を使用して <button> に属性を設定しています。

HTML

<button>Hello World</button>

button {
  height: 30px;
  width: 100px;
  margin: 1em;
}

JavaScript

const button = document.querySelector("button");
button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

結果

これは 2 つのことを示しています。

• 最初の setAttribute() の呼び出しでは、name 属性の値を "helloButton" に変更しています。 これはブラウザーのページインスペクター (Chrome, Edge, Firefox, Safari) を使用すると確認することができます。
• disabled のような論理属性の値を設定するには、任意の値を指定することができます。 推奨される値は空の文字列か属性名です。 重要なことは、属性が存在する場合、実際の値に関係なく、その値は true とみなされるということです。 属性が存在しない場合、その値は false となります。disabled 属性の値を空文字列 ("") に設定することで、disabled を true に設定することになり、その結果ボタンは無効になります。

仕様書

ブラウザーの互換性

関連情報

• Element.hasAttribute()
• Element.getAttribute()
• Element.removeAttribute()
• Element.toggleAttribute()