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 相关文章推荐
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
如何手写一个简易的 Vuex
Oct 10 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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 file_exists问题杂谈
2012/05/07 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python实现验证码识别
2020/06/15 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
教师聘用意向书
2015/05/11 职场文书
幸福来敲门观后感
2015/06/04 职场文书
处罚决定书范文
2015/06/24 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android