ホームページ > 記事 > ウェブフロントエンド > Firefox が div の高さ 0 を取得するために offsetHeight を使用する問題を解決する方法
Firefox が div の高さ 0 を取得するために offsetHeight を使用する問題を解決する方法
- 不言オリジナル
- 2018-06-21 16:33:502227ブラウズ
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='javascript'>
window.attachEvent( "onload", function(){ _resizeScroll2();} );
window.onresize=function(){winresize();};
function _resizeScroll2(){
var html1 = '<p id="pcj" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<p style="float:left;width:50px;">测试</p>'
+ '<p style="float:left;width:320px;">danielinbiti</p>'
+ '</p>'
+ '<p id="pcj2" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<p style="width:320px;">danielinbiti</p>'
+ '</p>'
document.getElementById('outer').innerHTML=html1;
document.getElementById('pcj2').style.display='none';
alert(document.getElementById('pcj2').offsetHeight);
}
</script>
</head>
<body>
<p id='outer'></p>
</body>
</html>pcjの高さを取得したらonloadで取得すると0になりました。なぜなら、pcj の下に float レイアウトがあるからです。
このときpが単純な場合は、ここでpcj2などの隠れ層を使用できます。floatを削除すると、得られる高さはpcjと同じになります。
ここで重要な点は、フロート レイアウトは IE では問題ありませんが、Firefox では 0 であるということです
上記はこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連情報にご注意ください。コンテンツ PHP中国語サイト！
関連する推奨事項:
HTML5 の video タグのブラウザ互換性を強化するソリューションを共有する以上がFirefox が div の高さ 0 を取得するために offsetHeight を使用する問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。