JavaScript setAttribute() メソッド

概要: このチュートリアルでは、JavaScript のsetAttribute()メソッドを使用して、指定した要素の属性に値を設定する方法を学びます。

JavaScript setAttribute() メソッドの紹介

指定した要素の属性の値を設定するには、setAttribute()メソッドを使用します。

element.setAttribute(name, value);Code language: CSS (css)

パラメーター

name は、値が設定される属性名を指定します。HTML 要素に対して setAttribute() を呼び出すと、自動的に小文字に変換されます。

value は、属性に割り当てる値を指定します。文字列以外の値をメソッドに渡すと、自動的に文字列に変換されます。

戻り値

setAttribute() はundefinedを返します。

要素に属性が既に存在する場合は、setAttribute()メソッドが値を更新し、存在しない場合は、指定したnameとvalueで新しい属性を追加します。

通常、選択した要素に対して setAttribute() を呼び出す前に、querySelector()またはgetElementById()を使用して要素を選択します。

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

JavaScript setAttribute() メソッドの例

次の例を参照してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS setAttribute() Demo</title>
</head>
<body>
    <button id="btnSend">Send</button>

    <script>
        let btnSend = document.querySelector('#btnSend');
        if (btnSend) {
            btnSend.setAttribute('name', 'send');
            btnSend.setAttribute('disabled', '');
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

動作の仕組み

まず、querySelector()メソッドを使用して、id がbtnSendのボタンを選択します。
次に、setAttribute()メソッドを使用して、name属性の値をsendに設定します。
次に、disabled属性の値を設定して、ユーザーがボタンをクリックしても何も行われないようにします。

disabled属性は、ブール属性であるため特殊です。ブール属性が存在する場合、どのような値を持っていようとも、その値はtrueと見なされます。ブール属性の値をfalseに設定するには、removeAttribute()メソッドを使用して属性全体を削除する必要があります。

まとめ

setAttribute()を使用して、指定した要素の属性の値を設定します。
ブール属性の値をどのような値に設定しても、その値はtrueと見なされます。

クイズ

このチュートリアルは役に立ちましたか？