元素未显示设置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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
vue中appear的用法
Aug 17 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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+DBM的同学录程序(5)
2006/10/09 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
售后主管岗位职责
2013/12/08 职场文书
广告词串烧
2014/03/19 职场文书
采购部长岗位职责
2014/06/13 职场文书
高三英语教学计划
2015/01/23 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
python入门之算法学习
2021/04/22 Python
Python合并多张图片成PDF
2021/06/09 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js