offsetHeight在OnLoad中獲取為0的現(xiàn)象
更新時間：2013年07月22日 18:11:22 作者：
需要獲取div的高度時，往往需要用到offsetHeight，有時會碰到offsetHeight獲取到為0的現(xiàn)象，感興趣的朋友可以參考下面的代碼片段
在使用IE中，特別在目前div+css的方式，往往不定義div的高度，這是在添加div內(nèi)容后，需要獲取div的高度時，往往需要用到offsetHeight。
在使用中，有時會碰到offsetHeight獲取到為0的現(xiàn)象，但如果你用各種JS調(diào)試工具調(diào)試，又能在對象中看到值（如果直接指向offsetHeight是沒值的，但如果是對象查看是有值的，在調(diào)試器中回車查看對象就已經(jīng)刷新對象了，所以有值。）
比如下面片段
<!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 = '<div id="divcj" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<div style="float:left;width:50px;">測試</div>'
+ '<div style="float:left;width:320px;">danielinbiti</div>'
+ '</div>'
+ '<div id="divcj2" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<div style="width:320px;">danielinbiti</div>'
+ '</div>'
document.getElementById('outer').innerHTML=html1;
document.getElementById('divcj2').style.display='none';
alert(document.getElementById('divcj2').offsetHeight);
}
</script>
</head>
<body>
<div id='outer'></div>
</body>
</html>
如果獲取divcj的高度，那么在onload中獲取到的是0。因為divcj下有float方式布局的。
這時如果div簡單，可以借助隱藏層，比如這里的divcj2，把float去掉后，獲取到的高度和divcj一樣高。
在使用中，有時會碰到offsetHeight獲取到為0的現(xiàn)象，但如果你用各種JS調(diào)試工具調(diào)試，又能在對象中看到值（如果直接指向offsetHeight是沒值的，但如果是對象查看是有值的，在調(diào)試器中回車查看對象就已經(jīng)刷新對象了，所以有值。）
比如下面片段
復(fù)制代碼 代碼如下:
<!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 = '<div id="divcj" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<div style="float:left;width:50px;">測試</div>'
+ '<div style="float:left;width:320px;">danielinbiti</div>'
+ '</div>'
+ '<div id="divcj2" style="margin-top:15px;font-size:10px;width:400px;">'
+ '<div style="width:320px;">danielinbiti</div>'
+ '</div>'
document.getElementById('outer').innerHTML=html1;
document.getElementById('divcj2').style.display='none';
alert(document.getElementById('divcj2').offsetHeight);
}
</script>
</head>
<body>
<div id='outer'></div>
</body>
</html>
如果獲取divcj的高度，那么在onload中獲取到的是0。因為divcj下有float方式布局的。
這時如果div簡單，可以借助隱藏層，比如這里的divcj2，把float去掉后，獲取到的高度和divcj一樣高。
相關(guān)文章
在 ThreeJs 中,動畫是創(chuàng)建動態(tài) 3D 場景的重要組成部分,本文將介紹如何使用 ThreeJs 實現(xiàn)基礎(chǔ)的動畫效果,需要的小伙伴可以參考一下2024-10-10
這篇文章主要介紹了如何利用JavaScript實現(xiàn)一個簡單的投票demo，文中的示例代碼講解詳細，對我們學(xué)習(xí)有一定參考價值，需要的可以參考一下2022-06-06
修改layui的后臺模板的左側(cè)導(dǎo)航欄可以伸縮的方法
今天小編就為大家分享一篇修改layui的后臺模板的左側(cè)導(dǎo)航欄可以伸縮的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文給大家介紹的是一篇國外網(wǎng)友寫的博客，講解的是關(guān)于實現(xiàn)復(fù)選框選中屬性的問題，感覺非常不錯，翻譯過來推薦給大家，希望小伙伴們能夠喜歡。2015-03-03
這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對解析excel感興趣的同學(xué)，可以參考下2021-04-04
在業(yè)務(wù)中,由于項目采用微前端架構(gòu),需要通過A應(yīng)用的某個值的變化對B應(yīng)用中的DOM進行改變（如彈出一個Modal）,第一個想到的可能是發(fā)布訂閱模式,其實不如將問題縮小化,采用原生的能力去解決,本文介紹了兩種方法來使用JS監(jiān)聽一個變量改變,需要的朋友可以參考下2023-11-11
學(xué)習(xí)JavaScript設(shè)計模式之觀察者模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的觀察者模式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript數(shù)組中相同的元素進行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
今天在打算從js端時序數(shù)據(jù)庫TSDB中,按相同的類型的數(shù)據(jù)排在一起,并且取同一時間段最新的數(shù)據(jù),經(jīng)過查詢這種思想叫做數(shù)據(jù)聚合,就是返回的數(shù)據(jù)要根據(jù)一個屬性來做計算,這篇文章主要介紹了JavaScript數(shù)組中相同的元素進行分組(數(shù)據(jù)聚合)?groupBy函數(shù),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JS滾動條觸底加載更多,需要的朋友可以參考下2019-09-09
JavaScript中保留小數(shù)點后N位方法總結(jié)
這篇文章主要為大家詳細介紹了JavaScript中保留小數(shù)點后N位的幾個常用方法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06