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


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 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
初识Node.js
Mar 20 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
jsTree使用记录实例
2016/12/01 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
中英文自我评价语句
2013/12/20 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2014年营销工作总结
2014/11/22 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python