在javascript中获取元素得尺寸有两种方法，主要通过clientWidth和clientHeight以及offsetWidth和offsetHeight. 那么这两者有什么区别呢?
我们创建html文件，并通过以上方法获取两个属性得值，查看两者的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取元素尺寸方法</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
font-size: 50px;
line-height: 50px;
width: 100px;
height: 100px;
border: 1px solid black;
padding: 5px 0 0 0;
}
</style>
</head>
<body>
<div id="demo">你好呀</div>
<script>
function getSize(obj) {
var size = {
width: 0,
height: 0,
widthWithBorder: 0,
heightWithBorder: 0,
};
if (!obj) {
return size;
}
if (obj.offsetHeight && obj.offsetWidth) {
size.widthWithBorder = obj.offsetWidth;
size.heightWithBorder = obj.offsetHeight;
}
if (obj.clientHeight && obj.clientWidth) {
size.width = obj.clientWidth;
size.height = obj.clientHeight;
}
return size;
}
console.log(getSize(demo));
</script>
</body>
</html>
在浏览器中打开以上文件，按f12查看日志输出结果如下：
{
"width": 100,
"height": 105,
"widthWithBorder": 101,
"heightWithBorder": 106
}
那么对于上面得结果输出，我们可以得出以下结论：
- offsetWidth得大小包含了：内容区域宽度 + padding左右宽度 + border左右宽度
- offsetHeight得大小包括：内容区域高度 + padding上下宽度 + border上下宽度
- clientWidth大小包括：内容区域 + padding左右宽度
- clientHeight大小包括：内容区域 + padding上下宽度
因此他们主要区别在于包不包含border得宽度，以上就是内容全部。
文章评论