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