Firebugでelement.styleが表示される件。

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記述を探すのがいいようです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください