ywork2020.com

Title

要素の属性値を取得する

目次 (INDEX)

getAttributeとは

ここで説明するgetAttribute とは次の語句からなるjavascriptのメソッドです。
get
読み: ゲット
意味: 取得する
attribute
読み: アトリビュート
意味: 属性

目次に戻る

getAttributeメソッドの概要

このメソッドは、引数に指定した属性の値を返します。

目次に戻る

構文

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

var strAttributeValue = element.getAttribute(strAttributeName);

目次に戻る

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

ここでは画像に置き換わるimg要素を題材にします。 この要素に必須とされる属性としてalt属性がありますが、この値を取得してみたいと思います。

サンプルコード: HTML
<body>
	<p><img id="idImg" src="soccer-ball.png" alt="サッカーボール"></p>
	<p><output id="idOutput"></output></p>
</body>
  • 02: img (画像に置き換わる要素です。この要素のalt属性の値を取得して表示します。)
  • 03: output (alt属性の値を出力するための要素です。)
サンプルコード: script
<script>
	let elmImg = document.getElementById("idImg");
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = elmImg.getAttribute("alt");
</script>
  • 02: elmImg (識別子=idImg の要素をElementオブジェクトとして取得します。)
  • 03: elmOutput (識別子=idOutput の要素をElementオブジェクトとして取得します。)
  • 04: 代入処理 (elmOutputのinnerText に elmImg.getAttribute("alt")で取得した値を代入します。)
実行結果:

画像: idImg
サッカーボール

出力: idOutput

目次に戻る