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 相关文章推荐
解析window.open的使用方法总结
Jun 19 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
用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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
十天学会php之第三天
2006/10/09 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
js电话号码验证方法
2015/09/28 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python 实现A*算法的示例代码
2018/08/13 Python
pytorch forward两个参数实例
2020/01/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
python合并多个excel文件的示例
2020/09/23 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
公司前台辞职报告
2014/01/19 职场文书
毕业论文评语大全
2014/04/29 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2016新年问候语大全
2015/11/11 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server
springboot读取resources下文件的方式详解
2022/06/21 Java/Android