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


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 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
黄河的主人教学反思
2014/02/07 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
好人好事演讲稿
2014/09/01 职场文书
电力工程合作意向书
2015/05/11 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Mysql Show Profile
2021/04/05 MySQL
Python列表的索引与切片
2022/04/07 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers