[JavaScript] setPropertyとsetAttributeを理解して使いこなす

2016年1月21日

Javascript テクノロジー プログラミング

HTMLをJSでコントロールする時にDOM操作は必須です。 その時にタグに付随するattributeとpropertyを適正に理解してコントロールできるようにしましょう。

違いを理解

どちらも「属性」ですが、この2つの使い方は異なることが多く、用途が違うためキチンと理解することが重要です。

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("設定項目" , "値" , "値2(省略可能)")
style属性の設置項目はcssの命令になります。 値はcssの設定値で値2に当たる部分は「important」が必要な場合に入れます。 値2は省略可能ですが、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");

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。