元素未显示设置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 20 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JS中移除非数字最多保留一位小数
May 09 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 实例化类的一点摘记
2008/03/23 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
分析python服务器拒绝服务攻击代码
2014/01/16 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python如何生成树形图案
2018/01/03 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
pycharm显示远程图片的实现
2019/11/04 Python
python如何写个俄罗斯方块
2020/11/06 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
文艺演出策划方案
2014/06/07 职场文书
保护动物的宣传语
2015/07/13 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android