HTMLをJSでコントロールする時にDOM操作は必須です。
その時にタグに付随するattributeとpropertyを適正に理解してコントロールできるようにしましょう。
違いを理解
どちらも「属性」ですが、この２つの使い方は異なることが多く、用途が違うためキチンと理解することが重要です。
getAttributeとsetAttribute
attribute操作は、HTMLタグの簡易属性に当たる値をコントロールする命令と考えると分かりやすいです。
<img src="hoge.png" id="img"/>
このタグのsrc属性を取得する時はgetAttributeで取得できます
var src = document.getElementById("img").getAttribute("src");
console.log(src);
> hoge.ng
IMGタグのsrc属性を変更する場合は以下のように設定できます。
document.getElementById("img").setAttribute("src","hogehoge.png");
↓↓↓
<img src="hogehoge.png" id="img"/>
getPropertyValueとsetProperty
属性といるよりも、attributeの属性内の項目に対しての値をセットする際に利用できます。
setProperty
propertyはstyle属性のそれぞれのCSS命令に対して行うのが通常の使い方です。
<div id="hoge"></div>
このDIVタグに対して
document.getElementById("hoge").style.setProperty("border","1px solid blank","");
setProperty("設定項目" , "値" , "値２（省略可能）")
style属性の設置項目はcssの命令になります。
値はcssの設定値で値２に当たる部分は「important」が必要な場合に入れます。
値２は省略可能ですが、chromeブラウザでこの項目をなくすとJSエラーが発生するバージョンがあるので、style属性のpropertyセットをする場合は、必須と考えてもいいでしょう。
getPropertyValue
propertyを取得する場合は「getProperty」ではなく「getPropertyValue」で行います。
var hoge = document.getElementById("hoge").style.getPropertyValue("border");
console.log(hoge);
これで「1px solid black」が取得できます。
その他の使い方サンプル
class名の変更
class名の変更は「className」属性で変更できますが、以下のようにセットすることも可能です。
document.getElementById("hoge-3").setAttribute("class","hogehoge-3");
