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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
js数组操作常用方法
May 08 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 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模板页面中分页代码的解析
2009/02/06 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python__name__原理及用法详解
2019/11/02 Python
Python API自动化框架总结
2019/11/12 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
个人职业生涯规划书1500字
2013/12/31 职场文书
入党自荐书范文
2014/03/09 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
九华山导游词
2015/02/03 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle