3

これが私の問題です:window.onloadがトリガーされたときにcssスタイルが初期化されません。

 <div id="foo"></div>

cssファイル

 #foo {
    height: 200px
 }

jsファイル

window.onload = function(){
     console.log(document.getElementById('foo').style.height);
};

コンソールの表示: ""

スタイル属性が使用されている場合 (style="height=200px")、スタイルは別のファイルにある必要があります。

4

4 に答える 4

6

.style.heightCSS ルールに基づくスタイルは表示されません。CSS ルールから継承されたスタイルではなく、HTML または JavaScript を介してそのオブジェクトに明示的に設定されたスタイルのみを返します。

代わりに、を使用する必要がありますwindow.getComputedStyle()。適切な使用方法の詳細については、MDN のドキュメントを参照してください。getComputedStyle()一例を次に示します。

window.getComputedStyle(document.getElementById('foo'),null).getPropertyValue("height");

注: 古いバージョンの IE では、ポリフィルをインストールするかgetComputedStyle、el.currentStyle.

于 2013-01-23T20:07:39.450 に答える
1

Element.style は inline styles( ) に対してのみ設定され<div id="foo" style="height: 200px"></div>ます。計算されたスタイルを取得するには、window.getComputedStyleを使用します。

window.getComputedStyle(document.getElementById("foo"), null).getPropertyValue('height')
于 2013-01-23T20:09:04.540 に答える
0

また、非常に優れた強力な機能を多数備えた非常に人気のある JavaScript ライブラリである jquery の使用を検討することもできます。また、 Google cdnを使用する場合、パフォーマンスについて心配する必要はありません。これは、ほとんどのブラウザがキャッシュにライブラリを既に持っているためです。

使用する要素の高さを取得するには、.height()完全な説明がここにありますhttp://api.jquery.com/height/

コードは次のようになります。

$(document).ready(function() {
  console.log($('#foo).height());
});

最初は少し混乱するように見えるかもしれませんが、すぐにコツをつかみ、jquery を使用して js をより速く、よりコンパクトに作成できるようになります。私はそれなしでは行きません！

于 2013-01-23T20:23:49.250 に答える
0

本当に必要なのは、offsetHeight または clientHeight です。これを試して：

window.onload = function(){
 console.log(document.getElementById('foo').offsetHeight);
};
于 2013-01-23T20:41:01.107 に答える