Javascriptを使った属性の追加と変更について

jyunzyです。
今回はJavascriptを使って属性の追加や変更の話をしたいと思います。

■ 属性の追加方法について

文法
element.setAttribute(name, value);
nameには属性の名前を入力します。
valueには属性の値を入力します。

#sampleにclass「btn」を付けたい場合

var sample = document.getElementById(‘sample’);
sample.setAttribute(‘class’, ‘btn’);

■ 属性の変更方法について

変更もsetAttribute()を使います。

#sampleのID名を変更したい場合

var sample = document.getElementById(‘sample’);
sample.setAttribute(‘id’, ‘sample2’);

ボタンをクリックした時に見た目を変えたい、という時に、上記のコードとjQueryのclick()イベントなどと組み合わせてみるといいですよ。