JavaScript

setAttributeで属性を追加・変更【JavaScript】

この記事では、setAttributeを使って属性を操作していきます。

setAttribute

setAttributeは指定した要素に属性を追加する、または既存の属性を変更します。

使い方

setAttribute('属性の名前', '新しい属性')という形式で使用します。

属性の追加

下記のソースコードにclassを追加してみます。

追加するのはbtnクラスです。

<a href="https://web-tsuku.life/" id="sample">ウェブつく</a>
.btn {
  background-color: blue;
  color: white;
  border-radius: 3px;
  padding: 5px;
  text-decoration: none;
}
var sample = document.getElementById('sample');
sample.setAttribute('class', 'btn');

sample.setAttribute('class', 'btn')によってclassを追加しています。

class追加前と追加後では下記のように表示が変わります。

属性の変更

属性の変更も同じようにできます。

<a href="https://web-tsuku.life/" id="sample">ウェブつく</a>
var sample = document.getElementById('sample');
sample.setAttribute('id', 'sample2');

上記のように指定することで、id名が上書きされ、変更されます。

変更後のソースコード↓

<a href="https://web-tsuku.life/" id="sample2">ウェブつく</a>

setAttributeのデモ

それではsetAttributeを使ったデモを作ってみます。

ラジオボタンの選択肢によって表示画像を変える」というプログラムです。

サンプルコード

<label><input type="radio" name="sample" id="a" onclick="changeImg(this)">画像Aを表示</label>
<label><input type="radio" name="sample" id="b" onclick="changeImg(this)">画像Bを表示</label>

<!-- デフォルト画像を表示 -->
<img src="https://web-tsuku.life/wp-content/uploads/2019/06/setattribute-default.png" id="target">
function changeImg(radio) {
  var radio_id = radio.id;
  var target = document.getElementById('target');
  target.setAttribute('src', 'https://web-tsuku.life/wp-content/uploads/2019/06/set_attribute_' + radio_id + '.png')
}

サンプルコードでは、選択されたラジオボタンのidを取得し、setAttributeで画像のsrcを変更しています。

画像ファイル名にidを組み込み、表示ファイル名を変更しています。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5