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 相关文章推荐
js动态加载以及确定加载完成的代码
Jul 31 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python产生模拟数据faker库的使用详解
2020/11/04 Python
python爬取微博评论的实例讲解
2021/01/15 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
中职生自荐信范文
2014/06/15 职场文书
计划生育宣传标语
2014/06/21 职场文书
员工保密协议书
2014/09/27 职场文书
送达通知书
2015/04/25 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技