在 JavaScript 中獲取元素的寬度
Anika Tabassum Era
2024年2月15日
JavaScript
JavaScript Element
JavaScript 允許我們與 Web 瀏覽器和 HTML 元素進行互動。最基本的元素之一是 img 元素或 div 元素。
檢索此類元素的正確尺寸有助於在對齊其他元件時做出準確的決定。因此，在這裡我們將討論檢測 HTML 元素的實際大小、高度和寬度。
可以藉助 HTML DOM 屬性 offsetWidth 確定基於視口尺寸的可見內容位置。
此外，我們將使用方法 element.getBoundingClientRect() 返回某個元素的整體定位。
在 JavaScript 中使用 HTML DOM 屬性獲取元素的寬度
HTML DOM 屬性 offsetHeight 和 offsetWidth 相應地扣除高度和寬度。它還包括 padding、border、scrollbar，如果這些都存在於可見內容中。
我們將在下面的示例中檢查一個 div 元素並將其設定為某個尺寸。
稍後，我們將獲取特定的 id 來處理 div 元素並應用 offsetWidth 屬性來控制元素的寬度。
程式碼片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div id="foo" style="background-color: purple; height:125px; width:125px">
</div>
</body>
</html>
var height = document.getElementById('foo').offsetHeight;
var width = document.getElementById('foo').offsetWidth;
console.log(height);
console.log(width);
輸出：
在 JavaScript 中使用 getBoundingClientRect() 方法獲取元素的寬度
getBoundingClientRect() 方法將返回一個包含多個引數的 DOMRect 物件。
這些引數描繪了與視口和瀏覽器約定相對應的內容的實際定位。
我們還將檢索元素的高度寬度和此驅動器中的其他尺寸。
程式碼片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div id="foo" style="background-color: black; height:125px; width:125px">
</div>
</body>
</html>
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
console.log(height);
console.log(width);
console.log(document.getElementById('foo').getBoundingClientRect());
輸出：
-Method-to-Get-Width-of-Element.webp)
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
