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