.offsetWidth 和 .offsetHeight
要获取元素占用的实际空间量，其中一种方法是使用 HTMLElement.offsetWidth 和 HTMLElement.offsetHeight 属性：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#divId {
height: 200px;
width: 350px;
padding: 20px;
margin: 25px;
border: 2px solid green;
}
</style>
</head>
<body>
<div id="divId">
<p>获取元素的高度和宽度，包括填充和边框。</p>
<p id="demo"></p>
</div>
<button onclick="GetHeightWidth()">Click on button</button>
<script>
function GetHeightWidth() {
let elem = document.getElementById("divId");
let width = "Width: " + elem.offsetHeight + "px<br>";
let height = "Height: " + elem.offsetWidth + "px";
document.getElementById("demo").innerHTML = width + height;
}
</script>
</body>
</html>
.offsetWidth 和 .offsetHeight 是只读属性是只读的。
第一个以整数形式返回布局元素的宽度，第二个以整数形式返回元素的高度（包括垂直填充和边框）。
在这些属性的情况下，如果元素被隐藏（例如，通过将元素或者祖先之一上的 style.display 设置为“none”值），则返回 0。
.getBoundingClientRect()
.getBoundingClientRect() 函数在执行 CSS 转换后以浮点数形式返回元素的尺寸和位置：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
#div1 {
height: 200px;
width: 300px;
overflow: auto;
}
#myDiv {
width: 250px;
height: 150px;
border: 1px solid red;
}
#div2 {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="div1">
<div id="myDiv"> 使用滚动条更改位置。</div>
<div id="div2"></div>
</div>
<br />
<button onclick="GetPosition()">获取红色框的位置</button>
<div id="demo"></div>
<script type="text/javascript">
function GetPosition() {
let div = document.getElementById("myDiv");
let rect = div.getBoundingClientRect();
x = rect.left;
y = rect.top;
width = rect.right - rect.left;
height = rect.bottom - rect.top;
document.getElementById("demo").innerHTML = (" Left: " + x + " Top: " + y + " Width: " + width + " Height: " + height);
}
</script>
</body>
</html>
大多数情况下 .offsetWidth 和 .offsetHeight 与 .getBoundingClientRect() 函数的宽度和高度相同，如果没有对元素应用任何变换。
如果存在转换，则属性返回元素的布局宽度和高度，而 getBoundingClientRect() 返回渲染宽度和高度。
.offsetWidth 和 .offsetHeight 属性将值四舍五入为整数。
如果你想要一个小数值，你应该使用元素 .getBoundingClientRect()。
在本教程中，我们将推荐两种检索 HTML 元素实际宽度和高度的方法。
日期：2020-06-02 22:16:25 来源：oir作者：oir