各情景下元素宽高的获取实现代码
更新时间：2011年09月13日 22:36:23 作者：
为了叙述简单，这里仅拿width示例。获取元素的offsetWidth/offsetHeight，减去元素的padding和border。
情景一，元素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。
复制代码 代码如下:
<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实现新增内容滚动播放效果,效果非常棒，实现代码简单易懂，需要的朋友可以参考下2017-08-08
JavaScript计时器用法分析【setTimeout和clearTimeout】
这篇文章主要介绍了JavaScript计时器用法,结合实例形式分析了setTimeout和clearTimeout函数的具体使用技巧,需要的朋友可以参考下2017-01-01
关于 Javascript 的函数作用域、调用对象和闭包之间的关系很微妙，关于它们的文章已经有很多，本文做了一些总结，需要的朋友可以参考下2012-11-11
这篇文章主要介绍了JS实现可拖曳、可关闭的弹窗效果,可实现点击文字弹出可拖动的窗口,同时背景出现变暗的遮罩效果,点击遮罩层即可关闭弹出,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了js实现跨域的方法,实例分析了几种常用的javascript实现跨域的技巧,需要的朋友可以参考下2015-06-06
js中有各种与位置相关的属性,每次看到的时候都各种懵逼,索性一次总结一下,这篇文章主要给大家介绍了关于js中位置计算的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
下面小编就为大家带来一篇页面间固定参数,通过cookie传值的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
JavaScript必知必会(六) delete in instanceof
这篇文章主要介绍了JavaScript必知必会(六) delete in instanceof的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。本文主要对require.js的使用与工作原理进行系统介绍。需要的朋友来看下吧2016-12-12
返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置,接下来通过本文给大家介绍原生JS实现平滑回到顶部组件，需要的朋友参考下吧2016-03-03
最新评论