scrol家族 offset家族 client家族學習

Scroll 系列屬性

scrollTop & scrollLeft

scrollTop: 返回元素的內容已向上滾動的部分的高度。
scrollLeft: 返回元素的內容已向左滾動的部分的寬度。

scrollHeight & scrollWidth

scrollHeight: 返回元素的實際高度，包括由于溢出而在屏幕上不可見的內容。
scrollWidth: 返回元素的實際寬度，包括由于溢出而在屏幕上不可見的內容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Scroll Properties Example</title><style>#container {width: 200px;height: 200px;overflow: auto;border: 1px solid black;}.content {width: 300px;height: 300px;}</style>
</head>
<body><div id="container"><div class="content"></div></div><button onclick="logScrollProperties()">Log Scroll Properties</button><script>function logScrollProperties() {const container = document.getElementById('container');console.log(`scrollTop: ${container.scrollTop}`);console.log(`scrollLeft: ${container.scrollLeft}`);console.log(`scrollHeight: ${container.scrollHeight}`);console.log(`scrollWidth: ${container.scrollWidth}`);}// 示例：自動滾動到底部setTimeout(() => {const container = document.getElementById('container');container.scrollTop = container.scrollHeight;container.scrollLeft = container.scrollWidth;}, 2000);</script>
</body>
</html>

Offset 系列屬性

offsetTop & offsetLeft

offsetTop: 元素相對于最近的定位祖先元素（position != static）頂部的距離。如果沒有這樣的祖先，則相對于初始包含塊（通常是視口）。
offsetLeft: 元素相對于最近的定位祖先元素左側的距離。如果沒有這樣的祖先，則相對于初始包含塊。

offsetParent

offsetParent: 返回一個指向最近的設置了 position 屬性（除了static之外）的祖先元素。如果沒有這樣的祖先，則返回 null 或者?<body>?元素。

offsetHeight & offsetWidth

offsetHeight: 包括 content + padding + border 的總高度。
offsetWidth: 包括 content + padding + border 的總寬度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Offset Properties Example</title><style>#outer {position: relative;top: 50px;left: 50px;width: 200px;height: 200px;background-color: lightblue;}#inner {position: absolute;top: 20px;left: 20px;width: 100px;height: 100px;background-color: yellow;}</style>
</head>
<body><div id="outer">Outer Div<div id="inner">Inner Div</div></div><button onclick="logOffsetProperties()">Log Offset Properties</button><script>function logOffsetProperties() {const outer = document.getElementById('outer');const inner = document.getElementById('inner');console.log(`Outer div's offsetTop: ${outer.offsetTop}, offsetLeft: ${outer.offsetLeft}`);console.log(`Inner div's offsetTop: ${inner.offsetTop}, offsetLeft: ${inner.offsetLeft}`);console.log(`Outer div's offsetHeight: ${outer.offsetHeight}, offsetWidth: ${outer.offsetWidth}`);console.log(`Inner div's offsetHeight: ${inner.offsetHeight}, offsetWidth: ${inner.offsetWidth}`);console.log(`Inner div's offsetParent: `, inner.offsetParent);}</script>
</body>
</html>

Client 系列屬性

clientTop & clientLeft

clientTop: 邊框的厚度（上邊框），不包括外邊距、內填充或水平滾動條。
clientLeft: 左側邊框的厚度。

clientHeight & clientWidth

clientHeight: 可見區域的高度，包括內填充但不包括邊框、外邊距或水平滾動條。
clientWidth: 可見區域的寬度，包括內填充但不包括邊框、外邊距或垂直滾動條。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Client Properties Example</title><style>#element {width: 200px;height: 200px;margin: 20px;padding: 10px;border: 5px solid red;overflow-y: scroll;}</style>
</head>
<body><div id="element">Some long text here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><button onclick="logClientProperties()">Log Client Properties</button><script>function logClientProperties() {const element = document.getElementById('element');console.log(`clientTop: ${element.clientTop}`); // Border thickness (top)console.log(`clientLeft: ${element.clientLeft}`); // Border thickness (left)console.log(`clientHeight: ${element.clientHeight}`); // Visible area including padding but excluding borders and scrollbarconsole.log(`clientWidth: ${element.clientWidth}`); // Same logic applies horizontally}</script>
</body>
</html>

總結

`scroll`	`scrollTop`	元素內容垂直滾動的像素數。
	`scrollLeft`	元素內容水平滾動的像素數。
	`scrollHeight`	元素內容的總高度，包括在視口中不可見的部分。
	`scrollWidth`	元素內容的總寬度，包括在視口中不可見的部分。
`offset`	`offsetTop`	元素頂部相對于包含元素的頂部的距離。
	`offsetLeft`	元素左邊緣相對于包含元素左邊緣的距離。
	`offsetHeight`	元素的高度，包括邊框和內邊距。
	`offsetWidth`	元素的寬度，包括邊框和內邊距。
`client`	`clientTop`	元素的上邊框的寬度。
	`clientLeft`	元素的左邊框的寬度。
	`clientHeight`	元素的內部高度，不包括水平滾動條高度。
	`clientWidth`	元素的內部寬度，不包括垂直滾動條寬度。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/67352.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/67352.shtml
英文地址，請注明出處：http://en.pswp.cn/web/67352.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！