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」と表示されます。

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

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

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

リスキリング 給付金が出るスクール紹介

最大70%の給付金が出るおすすめのプログラミングスクール!

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります!

興味のある方はすぐに確認しましょう。

この記事のまとめ

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

  • hasAttributeメソッドはHTML要素の指定の属性が存在するかどうかを判定するためのメソッド
  • 要素.hasAttribute(“属性名”)と記述することで使用できる。
  • 指定の属性が存在する場合はtrue、存在しない場合はfalseが返される

hasAttributeメソッド、便利そうですね!これを使って要素の属性を判定するスクリプトを書いてみたいと思います。

hasAttributeメソッドは、JavaScriptによるHTML要素の操作において非常に便利なメソッドです。要素の属性が存在するかどうかを判定する際には是非とも利用してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次