元素未显示设置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 相关文章推荐
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vuex与组件联合使用的方法
May 10 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP发送短信代码分享
2015/08/11 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
js实现随机8位验证码
2020/07/24 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
pycharm实现猜数游戏
2020/12/07 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
设计毕业生简历中的自我评价
2013/10/01 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
家长会学生演讲稿
2014/04/26 职场文书
法学院毕业生求职信
2014/06/25 职场文书
金融保险专业求职信
2014/09/03 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript