JavaScriptで指定したタグに属性を追加するコードを紹介します。
概要
指定したタグに属性を追加したい場合があります。よくある利用方法としては、スイッチのようにON,OFFを切り替えるタグ要素でスイッチの状態を記憶させるため、
要素に属性を追加してスイッチの状態を格納するといった用途があります。
指定したタグに属性を追加する場合には、タグの要素のオブジェクトを取得し、オブジェクトの
setAttribute() メソッドを呼び出して属性を設定します。
プログラム例
下記のHTMLファイルを作成します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function switchClick() {
var elem = document.getElementById("switch1");
if (elem.getAttribute("switch-state") == "true") {
elem.src = "switch-off.png"
elem.setAttribute("switch-state", "false");
} else {
elem.src = "switch-on.png"
elem.setAttribute("switch-state", "true");
}
}
</script>
</head>
<body>
<h2>SetAttributeを利用したスイッチのデモ</h2>
<img style="width:120px;" id="switch1" src="switch-off.png" onclick="switchClick();" />
</body>
</html>
解説
imgタグでスイッチの画像を表示します。imgタグの画像をクリックすると
onclick イベントにより
switchClick() 関数を呼び出します。
switchClick 関数では、初めに
document.getElementById() メソッドを呼び出し、imgタグの要素を取得します。
var elem = document.getElementById("switch1");
取得した要素の
getAttribute()メソッドを呼び出し、
switch-state 属性の値を取得します。
値がtrueである場合はスイッチがONの状態とし、OFFの画像に変更し、setAttribute
メソッドを呼び出し、switch-state
属性の値をfalseに設定します。
switch-state 属性の値がtrueでない場合、すなわち、値がfalseの場合、あるいは
switch-state 属性がない場合は、スイッチがOFFの状態とし、
ONの画像に変更し、
setAttribute メソッドを呼び出し、
switch-state 属性の値を true に設定しています。
if (elem.getAttribute("switch-state") == "true") {
elem.src = "switch-off.png"
elem.setAttribute("switch-state", "false");
} else {
elem.src = "switch-on.png"
elem.setAttribute("switch-state", "true");
}
画像
switch-off.png, switch-on.png の画像を用意します。下図の画像を利用します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
スイッチの画像をクリックします。クリックするとスイッチの画像がONの状態に変わります。
もう一度クリックするとスイッチの画像がOFFの状態に変わります。
開発者ツールを利用してタグの状況を確認します。
ページ表示直後は、元のコードのimgタグです。
<img style="width:120px;" id="switch1" src="switch-off.png" onclick="switchClick();" />
スイッチの画像をクリックすると、getAttribute メソッドを呼び出し、
switch-state 属性を取得しますが属性が存在しないため、戻り値は
nullとなります。
スイッチがオフの状態と判定され、スイッチの画像が
switch-on.png に変わることと、
switch-state が追加され、値が "true" に設定されることが確認できます。
<img style="width:120px;" id="switch1" src="switch-on.png" onclick="switchClick();" switch-state="true">
もう一度スイッチの画像をクリックするとgetAttribute メソッドを呼び出し、
switch-state 属性を取得します。戻り値は
true となるため、
スイッチがオンの状態と判定され、スイッチの画像が
switch-off.png に変わることと、
switch-state 属性の値が "false" に変更されることが確認できます。
<img style="width:120px;" id="switch1" src="switch-off.png" onclick="switchClick();" switch-state="false">
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-01-06
作成日: 2022-01-06
