首頁 > web前端 > css教學 > 如何解決火狐在用offsetHeight取得div的高度時為0

如何解決火狐在用offsetHeight取得div的高度時為0

不言
發布: 2018-06-21 16:33:50
原創
2260 人瀏覽過

火狐在需要取得p的高度時,往往需要用到offsetHeight,有時會碰到offsetHeight取得到為0的現象,下面為大家介紹下比較實用的解決方法,有興趣的朋友可參考下

火狐在需要取得p的高度時,往往需要用到offsetHeight,有時會碰到offsetHeight取得到為0的現象, 

在使用IE或火狐中,特別在目前p css的方式,往往不定義p的高度,這是在添加p內容後,需要取得p的高度時,往往需要用到offsetHeight。

在使用中,有時會碰到offsetHeight取得到為0的現象,但如果你用各種JS調試工具調試,又能在對像中看到值(如果直接指向offsetHeight是沒值的,但如果是物件檢視是有值的,在偵錯器中回車查看物件就已經刷新物件了,所以有值。) 

例如下面片段 

程式碼如下:

<!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一樣高。

這裡有一個關鍵點就是float佈局在ie是沒問題,但是對於火狐它取到就為0了

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於HTML5中video標籤瀏覽器相容性增強的方案分享

以上是如何解決火狐在用offsetHeight取得div的高度時為0的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板