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 更严格的相等 [译]
Sep 20 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
axios学习教程全攻略
Mar 26 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
JS实现多功能计算器
Oct 28 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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中数组定义的几种方法
2013/09/01 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
实例讲解PHP表单处理
2019/02/15 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python3实现逐字输出的方法
2019/01/23 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
What is view? why do we have view?
2012/06/22 面试题
学生处主任岗位职责
2013/12/01 职场文书
初三学生个人自我评定
2014/04/06 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
保密工作整改报告
2014/11/06 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
Python如何导出导入所有依赖包详解
2021/06/08 Python