元素未显示设置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 31 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
ES6 Promise对象的应用实例分析
Jun 27 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 stream_context_create()作用和用法分析
2011/03/29 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Python类成员继承重写的实现
2020/09/16 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
医院护士的求职信
2014/01/03 职场文书
人事部岗位职责范本
2014/03/05 职场文书
产品质量承诺范本
2014/03/31 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
聘任书范文大全
2015/09/21 职场文书
思想品德课教学反思
2016/02/24 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android