元素未显示设置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下string.format函数补充
Aug 24 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 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设计模式 Bridge (桥接模式)
2011/06/26 PHP
教你如何使用php session
2013/10/28 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python教程之全局变量用法
2016/06/27 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
如何基于线程池提升request模块效率
2020/04/18 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
高一物理教学反思
2014/01/24 职场文书
运动会入场式解说词
2014/02/18 职场文书
地球一小时倡议书
2014/04/15 职场文书
跳蚤市场口号
2014/06/13 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
《观潮》教学反思
2016/02/17 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery