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 相关文章推荐
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jquery 插件学习(二)
Aug 06 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
smarty模板数学运算示例
2016/12/11 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
js改变css样式的三种方法推荐
2016/06/28 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python检测网站链接是否已存在
2016/04/07 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
大学生秋游活动方案
2014/02/17 职场文书
我的长生果教学反思
2014/04/28 职场文书
销售队伍口号
2014/06/11 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python