元素未显示设置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 CSS修改学习第二章 样式
Feb 19 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
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 5.0对象模型深度探索之绑定
2006/09/05 PHP
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP中cookie知识点学习
2018/05/06 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
js 中的switch表达式使用示例
2020/06/03 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
详解Anaconda 的安装教程
2020/09/23 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
大学自我鉴定
2013/12/20 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
一般纳税人申请报告
2015/05/18 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
初中生物教学反思
2016/02/20 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS