styleの取得

javascript CSS

覚え書き。
ってか、またもやこの程度知らなかったのかって感じ。ホント情けねぇ…

bodyの背景色を変える

document.getElementsByTagName('BODY')[0].style.backgroundColor = "#00f";

これはさすがに知ってた(；^ω^)

bodyの背景色を取得する

取得も同じ様に出来ると思ってたら…

alert(document.getElementsByTagName('BODY')[0].style.backgroundColor);



空っぽ…orz

こうやって取得する

IE、Operaの場合

element.currentStyle

alert(document.getElementsByTagName('BODY')[0].currentStyle.backgroundColor);

currentStyleの後に、styleオブジェクトの属性名を記述すればok。こっちはわかりよい感じ。

Firefox(Safariも?)の場合

element.getComputedStyle

var elm = document.getElementsByTagName('BODY')[0];
alert(document.defaultView.getComputedStyle(elm, null).getPropertyValue('background-color'));

getComputedStyleの第1引数に、取得する要素を渡して*1やり、
その後に、getPropertyValueで属性名を渡す。
ただし、こっちの属性名は、CSSでの属性名になるので注意が必要。

ちなみに…

Firefoxの場合、色系(フォント色、背景色etc)のプロパティは、RGB値で返されるみたいです。

参考

Firefoxでのstyle取得の詳細は、以下を参照。
getComputedStyle −MDC
getPropertyValueはなんか見つからないので、ここの例6を参照。

*1:第2引数については参考のところのurlを参照