Firebugというブラウザのアドオンで、主にWeb制作者が使うツールの話。

以前はFirefoxブラウザだけでしたが、何年か前にGoogle Chromeブラウザにもアドオンが加わったので、デベロッパーツールと併用して使っています。

（対象が狭くてすみません）
今朝、JavascriptでDivタグの高さを指定しているソースをFirebugで見ると、ソースにない指定が見えました。

こんな感じ。
＜div class=”XXXX” style=”height: 173px;”＞

ん？
style=”height: 173px;“なんて書いた覚えはないぞ？
と思い、Firebugのcssの欄を見ると
element.style {
height: 173px;
}
とあります。

しかしCSSファイルやヘッダーにもそんな記述はした覚えがないのですが、いったいこれはなに？

まあ結論から言えば、私の場合、このDivに指定したclassにJavascriptで高さを制御する記述があるのですが、FirebugではHTMLがJavascriptによって指定（制御）されている値を、cssだと*.cssの何行目って明示してくれますが、Javascriptでは何行目に書いてありますよ、とは教えてくれず、その代わりに、HTMLにstyle=”height: 173px;とローカルで付記しつつ、element.style {height: 173px;}と明示してくれているようです。

・・・ということで、実際のCSSやHTMLに書かれているわけではないのですね。
ロジック的に説明してくれる人がいたら教えてください。

追伸
やはりJavascriptで設定したstyleがelement.styleになって表示されますね。

ついついCSSの記述内で該当するstyleを探してしまうのですが、Javascriptの中で該当するstyle記述を探すのがいいようです。