元素未显示设置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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
12 种使用Vue 的最佳做法
Mar 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中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php中curl使用指南
2015/02/05 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python 统计代码行数简单实例
2017/05/04 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
试用期员工考核制度
2014/01/22 职场文书
企业军训感想
2014/02/07 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
欠条范文
2015/07/03 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android