JavaScript　hasAttributeの使い方：要素に指定の属性が存在するか判定する方法

JavaScriptのhasAttributeメソッドを使って、HTML要素に指定の属性が存在するかどうかを判定する方法を解説します。

HTML要素の属性が存在するか判定するにはどのようにすればいいですか？

hasAttributeメソッドを使うと簡単に判定することができます。

hasAttributeメソッドとは

　hasAttributeメソッドは、HTML要素が指定の属性を持っているかどうかを判定するためのメソッドです。指定の属性が存在する場合はtrue、存在しない場合はfalseが返されます。

hasAttributeメソッドを使用するには、以下の様に記述します。

要素.hasAttribute(“属性名”);

次のサンプルプログラムは、HTML要素にclass属性が存在するかどうかを判定するスクリプトです。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function checkAttribute() {
        var element = document.getElementById("myDiv");
        if (element.hasAttribute("class")) {
          alert("The element has a class attribute.");
        } else {
          alert("The element does not have a class attribute.");
        }
      }
    </script>
  </head>
  <body>
    <div id="myDiv" class="example">This is a div element</div>
    <button onclick="checkAttribute()">Check Attribute</button>
  </body>
</html>

　この例では、IDが「myDiv」の要素に対してhasAttributeメソッドを呼び出して、「class」属性が存在するかどうかを判定しています。

　「class」属性が存在する場合、アラートが「The element has a class attribute」と表示されます。存在しない場合は、「The element does not have a class attribute」と表示されます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。