setAttribute() はElement インターフェイスのメソッドで、指定された要素の属性の値を設定します。属性が既に存在する場合は値が更新され、そうでない場合は指定された名前と値で新しい属性が追加されます。

属性の現在の値を取得するにはgetAttribute() を、属性を削除するにはremoveAttribute() を呼び出します。

追加する前にAttr ノードに対して操作をする必要がある場合は（他の要素から複製するなど）、代わりにsetAttributeNode() メソッドが使用できます。

構文

setAttribute(name, value)

引数

name

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

value

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

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

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

返値

なし (undefined)。

例外

InvalidCharacterErrorDOMException

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()