各情景下元素宽高的获取实现代码


Posted in Javascript onSeptember 13, 2011

情景一,元素style属性设置了width/height

<div style="width:100px;">test<div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.style.width); 
</script>

如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
<div>test<div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.style.width); 
</script>

所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
<style> 
div {width: 100px} 
</style> 
<div>test<div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
alert(div.style.width); 
</script>

这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
<style> 
div {width: 100px} 
</style> 
<div>test<div> 
<script> 
function getStyle(el, name) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null); 
}else{ 
return el.currentStyle; 
} 
} 
var div = document.getElementsByTagName('div')[0]; 
alert(getStyle(div, 'width')); 
</script>

所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
<div>test<div> 
<script> 
function getStyle(el, name) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null); 
}else{ 
return el.currentStyle; 
} 
} 
var div = document.getElementsByTagName('div')[0]; 
alert(getStyle(div, 'width')); 
</script>

div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
情景三,元素既没有设置style属性,也没有引入样式表
<div>test<div> 
<script> 
function getStyle(el,name) { 
if(window.getComputedStyle) { 
return window.getComputedStyle(el, null)[name]; 
}else{ 
return el.currentStyle[name]; 
} 
} 
function getWH(el, name) { 
var val = name === "width" ? el.offsetWidth : el.offsetHeight, 
which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']; 
// display is none 
if(val === 0) { 
return 0; 
} 
for(var i = 0, a; a = which[i++];) { 
val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0; 
val -= parseFloat( getStyle(el, "padding" + a) ) || 0; 
} 
return val + 'px'; 
} 
var div = document.getElementsByTagName('div')[0]; 
alert(getWH(div, 'width')); 
</script>

思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
Javascript 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JS字符串函数扩展代码
Sep 13 #Javascript
Javascript学习笔记 delete运算符
Sep 13 #Javascript
Webkit的跨域安全问题说明
Sep 13 #Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 #Javascript
容易被忽略的JS脚本特性
Sep 13 #Javascript
Javascript学习笔记-详解in运算符
Sep 13 #Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python基本数据类型详细介绍
2014/03/11 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python爬取m3u8连接的视频
2018/02/28 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
应届大专生自荐书
2014/06/16 职场文书
关于保护环境的建议书
2014/08/26 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
党员年终个人总结
2015/02/14 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
修辞手法有哪些?
2019/08/29 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
redis 存储对象的方法对比分析
2021/08/02 Redis