JS中几种获取对象宽度和高度的区别

1、clientWidth / clintHeight

clientWidth? = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight

clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom

注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）

注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）

2、clientTop / clientLeft

clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）

clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）

没有滑动条的效果代码如下：

[html] view plain copy

获取元素的高度和宽度

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

}

//获取content对象

var contentObj = document.getElementById("content");

console.log(contentObj.clientHeight);

console.log(contentObj.clientWidth);

?

以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)

有滚动条的代码如下,

在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条

[html] view plain copy

获取元素的高度和宽度

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

//获取content对象

var contentObj = document.getElementById("content");

console.log(contentObj.clientHeight);

console.log(contentObj.clientWidth);

console.log(contentObj.clientTop);

console.log(contentObj.clientLeft);

?

最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)

201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)

3、offsetHeight / offsetWidth

offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度

注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同

[html] view plain copy

获取元素的高度和宽度

#wrap{

height: 500px;

width: 500px;

background-color: skyblue;

margin: 0 auto;

border: 3px solid red;

overflow: scroll;

padding: 5px;

}

#content{

height: 200px;

width: 200px;

background-color: greenyellow;

margin: 0 auto;

border: 0px solid yellow;

border-width: 5px 6px 8px 12px;

padding: 5px 4px 6px 12px;

margin-top: 50px;

overflow: scroll;

}

#one{

height: 300px;

width: 300px;

}

//获取content对象

var contentObj = document.getElementById("content");

console.log(contentObj.offsetHeight);

console.log(contentObj.offsetWidth);

console.log(contentObj.offsetLeft);

console.log(contentObj.offsetTop);

?

输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)

offsetWidth = width(200) + paddingLeft(12) + paddingRight(4)? + borderLeft(12) + borderRight(6)

4、offsetTop / offsetLeft

offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离

offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离

5、scrollHeight / scrollWidth

scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值

scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding

6、scrollTop

scrollTop 元素滚动的距离

宽和高是指图像或画布的宽度和高度。在计算机绘图中，我们经常听到这样的术语，因为它们是确定图像质量和大小的关键参数。宽和高是根据像素数来计算的，通常以像素为单位。因此，当我们想要在网上上传一幅或者在印刷品上使用一幅时，我们需要知道它的宽和高，以确保它的质量不会发生严重变化或者变形。

测量图像的宽和高是一个相对简单的过程。在大多数图像浏览器和编辑器中，你可以在属性面板中找到宽和高的值。如果你想用其他工具来测量宽和高，你可以使用一把尺子或者其他测量工具，从图像的边角或边缘开始测量它们的长度。在网页设计中，你可以使用浏览器的开发者工具来查看图像和其他元素的尺寸和位置。不管使用哪种方法，测量宽和高是一个重要的步骤，以确保你的图像或设计工作的质量和正确性。

宽和高的应用非常广泛，尤其在数字媒体和网页设计领域。在网页设计中，设计师需要考虑浏览器的尺寸和分辨率，以确保网站能够在不同的设备和屏幕大小上呈现良好的效果。同时，设计师还需要保证界面元素的大小和比例合适，以保证用户体验。在**和视频制作中，宽和高也起到了非常重要的作用。例如，在24帧每秒的**画面中，宽度通常为1920个像素，高度为1080个像素，这是一种称为“1080p”的分辨率标准。这种标准可以保证高清晰度的影像效果，具有很好的视觉感官体验。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com