元素未显示设置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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
微信小程序实现文字跑马灯效果
May 26 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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+SqlServer实现分页显示
2006/10/09 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
500行python代码实现飞机大战
2020/04/24 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
保安员岗位职责
2013/11/17 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
物流专员岗位职责
2014/02/17 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
Java中的随机数Random
2022/03/17 Java/Android