ywork2020.com

Title

要素が指定した属性を持つか調べる

目次 (INDEX)

hasAttributeとは

ここで説明するhasAttribute とは次の語句からなるjavascriptのメソッドです。
has
読み: ハズ
意味: 持っている
attribute
読み: アトリビュート
意味: 属性

目次に戻る

hasAttributeメソッドの概要

このメソッドは、要素が引数に指定した属性を持っているかを、真偽値で返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var boolean = element.hasAttribute(attrName);

目次に戻る

サンプルコードと実行結果

ここでは、2つのoutput要素を題材にします。 この2つの要素の片方にはstyle属性をつけて文字色を赤色にしています。 もう片方の要素にはstyle属性はついていません。 これをhasAttribute("style")つかって真偽値を取得します。

サンプルコード: HTML
<body>
	<p><output id="idTrue" style="color: ##red">innerText</output></p>
	<p><output id="idFalse">innerText</output></p>
	<p><input type="button" value="判定" onclick="func()"></p>
</body>
  • 02: output (この要素にはstyle属性があります。)
  • 03: output (この要素にはstyle属性がありません。)
  • 04: input (判定ボタンです。クリックするとfunc()関数を実行します。)
サンプルコード: script
<script>
	let elmTrue = document.getElementById("idTrue");
	let elmFalse = document.getElementById("idFalse");
	function func(){
		elmTrue.innerText = elmTrue.hasAttribute("style");
		elmFalse.innerText = elmFalse.hasAttribute("style");
	}
</script>
  • 02: elmTrue (idTrueの要素をElementオブジェクトとして取得しています。)
  • 03: elmFalse (idFalseの要素をElementオブジェクトとして取得しています。)
  • 04-07: func() (作成した関数です。)
  • 05: func()の内容 (elmTrueにstyle属性があるかを調べて表示します。)
  • 06: func()の内容 (elmFalseにstyle属性があるかを調べて表示します。)
実行結果:

output要素: id="idTrue"
innerText

output要素: id="idFalse"
innerText

判定:

目次に戻る