JavaScript で属性を変更する

このチュートリアルでは、JavaScript で setAttribute() 関数を使用して要素の属性を変更する方法について説明します。

JavaScript で setAttribute() 関数を使用して要素の属性を変更する

JavaScript の setAttribute() 関数を使用して、HTML 要素の属性を変更できます。

HTML 要素に既に属性があるとします。 その場合、setAttribute() 関数は前の属性を更新し、HTML 要素に属性がない場合、setAttribute() 関数は要素に新しい属性を追加します。

setAttribute() 関数の基本的な構文は次のとおりです。

element.setAttribute(name, value)

setAttribute() 関数は、上記の構文に示すように、name と value の 2つの引数を受け入れます。 name 引数は、class や id のような属性の名前を指定する文字列です。

setAttribute() 関数の value 引数も文字列であり、最初の引数として指定された名前の引数の値を設定するために使用されます。 setAttribute() 関数は値を返しません。

上記の構文の element は、属性を設定したい要素です。 querySelector()、getElementById()、getElementByClassName() などの多くの関数を使用して、JavaScript で HTML 要素を取得できます。

上記のすべての関数の基本的な構文を以下に示します。

const MyElement = document.querySelector(ElementName);
const MyElement = document.getElementById(ElementID);
const MyElement = document.getElementByClassName(ElementClassName);

上記の構文では、querySelector() 関数は、div、h1 などの要素の名前を指定する文字列値を受け入れます。getElementById() 関数は、要素の ID を指定する文字列値を受け入れます。 id キーワードを使用して任意の HTML 要素に与えることができます。

getElementByClassName() 関数は、要素のクラス名を指定する文字列値を受け入れます。これは、class キーワードを使用して任意の HTML 要素に与えることができます。 上記のすべての関数は、関数の入力文字列が複数の HTML 要素で使用されている場合、単一および複数の要素を返します。

複数の要素の場合、すべての要素の属性が変更されます。 1つの要素の属性を設定する場合は、各要素に異なるクラス名または ID を指定する必要があります。

たとえば、setAttribute() 関数を使用して要素の class 属性を設定してみましょう。 以下のコードを参照してください。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .test1 {
            font-size: 50px;
            color: blue;
        }
        .test2 {
            font-size: 100px;
            color: red;
        }
    </style>
</head>

<body>
    <h1 id="id1" class="test1">set attribute</h1>
    <script>
        const MyElement = document.getElementById("id1");
        MyElement.setAttribute("class", "test2");
    </script>
</body>

</html>

出力：

上記のコードでは、h1 タグを使用してテキストを表示し、要素に ID とクラス名を追加しました。 style タグを使用して、h1 タグの属性を変更するために使用する 2つのスタイルを作成しました。

body タグ内で script タグを使用して JavaScript コードを記述しました。 script タグ内では、getElementById() 関数を使用して ID を使用して要素を取得し、setAttribute() 関数を使用してクラスを test1 から test2 に変更しました。

上記の出力では、テキストの色とフォント サイズが変更されていることがわかります。

test1 と test2 の両方のスタイルには、異なる色とフォント サイズが含まれています。 上記のコード内では、青い色を含む h1 タグにクラス名 test1 を付けていますが、script タグ内でクラス属性を test2 に変更しているため、 出力は赤です。

上記のコードでは、class 属性を変更しましたが、要素の id または name 属性のような他の属性も変更できます。 getAttribute() 関数を使用して要素の属性を取得でき、removeAttribute() 関数を使用して要素の既存の属性を削除できます。