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 相关文章推荐
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 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
浅析PHP水印技术
2007/02/14 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Javascript中的数学函数
2007/04/04 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python多线程http压力测试脚本
2019/06/25 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Python实现自动整理文件的脚本
2020/12/17 Python
计算机科学与技术应届生求职信
2013/11/07 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
《忆江南》教学反思
2014/04/07 职场文书
部门活动策划方案
2014/08/16 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
python基础之函数的定义和调用
2021/10/24 Python