元素未显示设置width/height时IE中使用currentStyle获取为auto


Posted in Javascript onMay 04, 2014

我们知道获取元素的实际宽高在IE中可以使用currentStyle属性。但如果没有显示的去设置元素的宽高,那么使用该属性将获取不到,获取的值为auto。如下

<div>abcd</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.currentStyle.width); 
alert(div.currentStyle.height); 
</script>

IE6/7/8/9中输出的都是auto。如果显示的设置了宽高,那么输出的就是实际宽高。如下

1,通过内联style属性设置

<div style="width:100px;height:50px;">abcd</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.currentStyle.width); 
alert(div.currentStyle.height); 
</script>

2,通过页面嵌入style标签设置
<style> 
div { 
width: 100px; 
height: 50px; 
} 
</style> 
<div>abcd</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.currentStyle.width); 
alert(div.currentStyle.height); 
</script>

都将输出:100px,50px
Javascript 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
在JavaScript中如何使用宏详解
May 06 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 #Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 #Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 #Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php读取mysql的简单实例
2014/01/15 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php中Snoopy类用法实例
2015/06/19 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
浅析Python编写函数装饰器
2016/03/18 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
极简的HTML5模版
2015/07/09 HTML / CSS
农救科工作职责
2013/11/27 职场文书
员工工作表扬信范文
2014/01/13 职场文书
总经理助理的职责
2014/03/14 职场文书
教师考核评语
2014/04/28 职场文书
2014中考励志标语
2014/06/05 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL