Firefox が div の高さ 0 を取得するために offsetHeight を使用する問題を解決する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Firefox が div の高さ 0 を取得するために offsetHeight を使用する問題を解決する方法

不言

Jun 21, 2018 pm 04:33 PM

Firefox が p の高さを取得する必要がある場合、offsetHeight が 0 であることがよくあります。興味のある方は、次のより実用的な解決策を参照してください。 p の高さを取得する必要がある場合、offsetHeight を使用する必要があることがよくあります。

IE や Firefox を使用している場合、特に現在の p+css メソッドでは、p の高さが取得できないことがよくあります。これは、p コンテンツを追加した後に p の高さを取得する必要がある場合に、offsetHeight を使用する必要があることがよくあります。

使っていると、offsetHeightが0として取得される現象に遭遇することがありますが、各種JSデバッグツールを使ってデバッグすると、オブジェクト内の値が確認できます(offsetHeightを直接指している場合は意味がありませんが、の場合、オブジェクトビューには値があります。 Enter キーを押してデバッガーでオブジェクトを表示すると、オブジェクトは更新されているため、値が含まれます。)

たとえば、次のフラグメント

コードは次のとおりです。 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script language=&#39;javascript&#39;> 
window.attachEvent( "onload", function(){ _resizeScroll2();} ); 
window.onresize=function(){winresize();}; 
function _resizeScroll2(){ 
var html1 = &#39;<p id="pcj" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="float:left;width:50px;">测试</p>&#39; 
+ &#39;<p style="float:left;width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
+ &#39;<p id="pcj2" style="margin-top:15px;font-size:10px;width:400px;">&#39; 
+ &#39;<p style="width:320px;">danielinbiti</p>&#39; 
+ &#39;</p>&#39; 
document.getElementById(&#39;outer&#39;).innerHTML=html1; 
document.getElementById(&#39;pcj2&#39;).style.display=&#39;none&#39;; 
alert(document.getElementById(&#39;pcj2&#39;).offsetHeight); 
} 
</script> 
</head> 
<body> 
<p id=&#39;outer&#39;></p> 
</body> 
</html>

ログイン後にコピー

pcjの高さを取得したらonloadで取得すると0になりました。なぜなら、pcj の下に float レイアウトがあるからです。

このときpが単純な場合は、ここでpcj2などの隠れ層を使用できます。floatを削除すると、得られる高さはpcjと同じになります。

ここで重要な点は、フロートレイアウトは IE では問題ありませんが、Firefox では 0 であるということです

上記はこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連情報にご注意ください。コンテンツ PHP中国語サイト！