编程 Javascript

offsetHeight在OnLoad中获取为0的现象

Posted in Javascript onJuly 22, 2013

在使用IE中，特别在目前div+css的方式，往往不定义div的高度，这是在添加div内容后，需要获取div的高度时，往往需要用到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='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在OnLoad中获取为0的现象

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 原型继承

Dec 26 Javascript

jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

Apr 12 Javascript

自己动手写的javascript前端等待控件

Oct 30 Javascript

jQuery+css实现的切换图片功能代码

Jan 27 Javascript

原生JS实现旋转木马式图片轮播插件

Apr 25 Javascript

使用Script元素发送JSONP请求的方法

Jun 12 Javascript

基于JavaScript实现轮播图代码

Jul 14 Javascript

bootstrap vue.js实现tab效果

Feb 07 Javascript

使用ionic播放轮询广告的实现方法(必看)

Apr 24 Javascript

PHP 实现一种多文件上传的方法

Sep 20 Javascript

使用webpack编译es6代码的方法步骤

Apr 28 Javascript

vue使用vuex实现首页导航切换不同路由的方法

May 08 Javascript

用jQuery获取IE9下拉框默认值问题探讨

Jul 22 #Javascript

JS 实现图片直接下载示例代码

Jul 22 #Javascript

js操作iframe兼容各种主流浏览器示例代码

Jul 22 #Javascript

JavaScript的模块化:封装(闭包),继承(原型) 介绍

Jul 22 #Javascript

JS判定是否原生方法

Jul 22 #Javascript

js图片延迟加载的实现方法及思路

Jul 22 #Javascript

js添加table的行和列具体实现方法

Jul 22 #Javascript