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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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 地址栏信息的获取代码
2009/01/07 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
农救科工作职责
2013/11/27 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书