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一样高。
Javascript 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
jquery键盘事件介绍
Jan 31 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JS实现4位随机验证码
Oct 19 Javascript
详解JavaScript中的this指向问题
Feb 05 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
You might like
真正的ZIP文件操作类(php)
2007/07/21 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
webpack之引入图片的实现及问题
2018/10/08 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python基于ID3思想的决策树
2018/01/03 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Django用户身份验证完成示例代码
2020/04/03 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
致接力运动员广播稿
2014/02/17 职场文书
大学生励志演讲稿
2014/04/25 职场文书
齐云山导游词
2015/02/06 职场文书
董事长助理岗位职责
2015/02/11 职场文书
个人先进事迹总结
2015/02/26 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年教务工作总结
2015/05/23 职场文书
java多态注意项小结
2021/10/16 Java/Android
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android