脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 元素宽高

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

 更新时间：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。

相关文章

  • 微信小程序如何实现点击图片放大功能

    微信小程序如何实现点击图片放大功能

    这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • js异步编程小技巧详解

    js异步编程小技巧详解

    这篇文章主要介绍了js异步编程技巧，使用计数器的方式，每完成一个请求计数器加1 当计数器等于2时执行回调逻辑,两个http并行发送,从而极大的提高了效率,需要的朋友可以参考下
    2017-08-08
  • 当鼠标滑过文本框自动选中输入框内容的JS代码分享

    当鼠标滑过文本框自动选中输入框内容的JS代码分享

    这篇文章主要介绍了当鼠标滑过文本框自动选中输入框内容的JS代码，有需要的朋友可以参考一下
    2013-11-11
  • js实现限定范围拖拽的示例

    js实现限定范围拖拽的示例

    这篇文章主要介绍了js实现限定范围拖拽的示例，帮助大家更好的制作js特效，美化自己的网页，感兴趣的朋友可以了解下
    2020-10-10
  • zTree插件之单选下拉菜单实例代码

    zTree插件之单选下拉菜单实例代码

    zTree插件之单选下拉菜单实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 比较常见的javascript中定义函数的区别

    比较常见的javascript中定义函数的区别

    js定义函数有好多种，但是他们之间的区别，大家都了解吗，接下来，小编通过本文给大家介绍比较常见的js中定义函数的区别，对本文感兴趣的朋友一起看看吧
    2015-11-11
  • 基于Cesium实现拖拽3D模型的示例代码

    基于Cesium实现拖拽3D模型的示例代码

    这篇文章主要为大家详细介绍了如何利用Cesium实现在地图上添加一个3D模型，并且可以实现拖拽效果。文中的示例代码讲解详细，感兴趣的可以了解一下
    2022-06-06
  • openlayers4实现点动态扩散

    openlayers4实现点动态扩散

    这篇文章主要为大家详细介绍了openlayers4实现的点动态扩散，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 基于JS对象创建常用方式及原理分析

    基于JS对象创建常用方式及原理分析

    下面小编就为大家带来一篇基于JS对象创建常用方式及原理分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • web打印小结

    web打印小结

    本文主要介绍了一款比较强大的web打印工具lodop实现将winform客户端的打印，移到网页上由客户自行打印，打印要求是根据一定的格式实现套打的过程与方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论