元素未显示设置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技术技巧大全(五)
Jan 22 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
学前端,css与javascript重难点浅析
Jun 11 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
php实现网站留言板功能
2015/11/04 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
js实现带积分弹球小游戏
2020/07/21 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python中的默认参数实例分析
2018/01/29 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python pygame实现球球大作战
2019/11/25 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
校园门卫岗位职责
2013/12/09 职场文书
大班开学家长寄语
2014/04/04 职场文书
安全标语大全
2014/06/10 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
关于Python使用turtle库画任意图的问题
2022/04/01 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers