元素未显示设置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应用之禁止抓屏、复制、打印
Feb 21 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
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程序的方法小结
2012/02/23 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
javascript 数组操作详解
2015/01/29 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python代码缩进和测试模块示例详解
2018/05/07 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python如何实现视频转代码视频
2019/06/17 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python爬取音频下载的示例代码
2020/10/19 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
大学新闻系求职信
2014/06/03 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL