今回の記事は、
- Javascriptを使ってHTML要素の属性を操作したい
- Javascriptを使ってHTML要素に属性を追加したい
というお悩みをお持ちの方に向けた記事になっています。
JavaScriptを学び直すなら最新の第7版がおすすめ
2022年ITエンジニア大賞を受賞した話題本
setAttribute()メソッドで属性値を追加する
HTML要素には様々な属性があり、有名どころでは、class
やid
などが思い浮かべられるかと思います。
その他にも、form要素の入力を制御するためのdisabled
属性や、画像などのパスを管理するためのsrc
属性などが存在しています。
Javascriptを使ってこれらの属性を追加するには、setAttribute()
メソッドを使用します。
それでは早速、setAttribute()
メソッドの基本的な使い方を見ていきましょう。
setAttribute()メソッドの使い方
setAttribute()メソッドは2つの引数を取り、第1引数には「操作したい属性名」を、第2引数には「設定したい値」を指定します。
基本的な使い方
setAttribute("属性名", "設定値")
setAttribute()メソッドの実装例その1
基本的な構文を知っていただいたところで、ここからは具体的な実装例を見ていきましょう。
ここでは、チェックボックスを押すとフォームの操作ができないようにしたいと思います。
実装コード
<input type="checkbox" onClick="disableForm()" id="checkbox1">
<input id="form1">
<script>
function disableForm() {
const checkbox1 = document.getElementById("checkbox1")
const form1 = document.getElementById("form1")
if (checkbox1.checked) {
form1.setAttribute("disabled", true)
} else {
form1.removeAttribute("disabled")
}
}
</script>
上記のコードでは以下のことを実施しています。
- 1. チェックボックスをクリックした際に
disableForm()
メソッドを動かす - 2.
getElementById()
メソッドを使って、チェックボックスとフォームのHTML要素を取得 - 3.
checked
メソッドを使って、チェックボックスがチェックされているかどうか(checked
属性)を判別 - 4. チェックボックスがチェックされていれば(
checked
属性がtrue
であれば)フォームを無効化(disabled
属性をtrue
に設定)し、チェックされていなければ(checked
属性がfalse
であれば)フォームを有効化(removeAttribute
メソッドでdisabled
属性を削除)
実際に以下のボタンで動作確認をしてみてください。
動作確認用
setAttribute()メソッドの実装例その2
続いては、ラジオボタンで選択した値がそのままフォームへ代入されるような例を見ていきましょう。
実装コード
<label>
<input type="radio" name="food" onClick="setFoodName('カレーライス')">
カレーライス
</label>
<label>
<input type="radio" name="food" onClick="setFoodName('ラーメン')">
ラーメン
</label>
<label>
<input type="radio" name="food" onClick="setFoodName('ハンバーグ')">
ハンバーグ
</label>
<label>
<input type="radio" name="food" onClick="setFoodName('チキン南蛮')">
チキン南蛮
</label>
<p>注文する料理名を記入してください。</p>
<input id="form2">
<script>
function setFoodName(foodName) {
const form2 = document.getElementById("form2")
form2.setAttribute("value", foodName)
}
</script>
上記のコードでは以下のことを実施しています。
- 1. チェックボックスをクリックした際に
setFoodName()
メソッドを動かす - 2.
getElementById()
メソッドを使って、フォームのHTML要素を取得 - 3. フォームの
value
属性に引数のfoodName
を設定
実際に以下のボタンで動作確認をしてみてください。
動作確認用
注文する料理名を記入してください。
getAttribute()メソッドで属性値を取得する
続いては、getAttribute()
メソッドを使って、属性値を取得してみましょう。
getAttribute()メソッドの基本的な使い方
使い方はsetAttribute()
メソッドよりも簡単で、取得したい属性を引数に指定するだけで大丈夫です。
基本的な使い方
getAttribute("属性名")
getAttribute()の実装例
実装コード
<input type="checkbox" name="checkbox" onClick="checkAttributes()" id="checkbox2">
<script>
function checkAttributes() {
const checkbox = document.getElementById("checkbox2")
console.log(checkbox.getAttribute("type"))
console.log(checkbox.getAttribute("name"))
}
</script>
実装結果
=> "checkbox"
=> "checkbox"
このように、getAttribute()メソッドの引数に取得したい属性を指定することで、その値を取得することができます。
最後に
さて、ここまで、HTMLタグの属性を追加/取得する方法について解説してきましたがいかがでしたか?
こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。
今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
JavaScriptを学び直すなら最新の第7版がおすすめ
2022年ITエンジニア大賞を受賞した話題本