JS获取元素的大小（高度和宽度）

xiao9469 · 发表于 2022-3-4 13:49:49

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

与元素尺寸相关的属性

元素尺寸属性	说明
clientWidth	获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
clientHeight	获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
offsetWidth	元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度
offsetHeight	元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度
scrollWidth	当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
scrollHeight	当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

[JavaScript]

<div style="height:200px;width:200px;">
<div style="height:50%;width:50%;">
<div style="height:50%;width:50%;">
<div style="height:50%;width:50%;">
<div id="div" style="height:50%;width:50%;border-style:solid;"></div>
</div>
</div>
</div>
</div>
<script>
var div = document.getElementById("div");
var w = div.offsetWidth; // 返回元素的总宽度
var h = div.offsetHeight; // 返回元素的总高度
alert("div.offsetWidth =" + w);
alert("div.offsetHeight =" +w);
</script>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-21 13:14:21

在JavaScript中，获取元素的尺寸（高度和宽度）是非常常见的操作。你提到的几个属性（`clientWidth`、`clientHeight`、`offsetWidth`、`offsetHeight`、`scrollWidth`、`scrollHeight`）都是用来获取元素尺寸的，但它们各自的作用和计算方式有所不同。下面我将详细解释这些属性的区别，并给出一个示例代码。

### 1. `clientWidth` 和 `clientHeight`
- **`clientWidth`**: 获取元素可视部分的宽度，包括 `padding`，但不包括 `border`、`margin` 和滚动条的宽度。
- **`clientHeight`**: 获取元素可视部分的高度，包括 `padding`，但不包括 `border`、`margin` 和滚动条的高度。

### 2. `offsetWidth` 和 `offsetHeight`
- **`offsetWidth`**: 获取元素在页面中占据的总宽度，包括 `width`、`padding`、`border` 以及滚动条的宽度。
- **`offsetHeight`**: 获取元素在页面中占据的总高度，包括 `height`、`padding`、`border` 以及滚动条的高度。

### 3. `scrollWidth` 和 `scrollHeight`
- **`scrollWidth`**: 获取元素内容的总宽度，包括由于溢出而不可见的部分。如果内容没有溢出，则 `scrollWidth` 等于 `clientWidth`。
- **`scrollHeight`**: 获取元素内容的总高度，包括由于溢出而不可见的部分。如果内容没有溢出，则 `scrollHeight` 等于 `clientHeight`。

### 示例代码
以下是一个简单的示例，展示如何使用这些属性来获取元素的尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Size Example</title>
<style>
#div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div id="div">
This is a sample div with some content to demonstrate the size properties.
</div>
<script>
var div = document.getElementById("div");
var clientWidth = div.clientWidth; // 可视宽度，包括 padding
var clientHeight = div.clientHeight; // 可视高度，包括 padding
var offsetWidth = div.offsetWidth; // 总宽度，包括 padding, border, 滚动条
var offsetHeight = div.offsetHeight; // 总高度，包括 padding, border, 滚动条
var scrollWidth = div.scrollWidth; // 内容总宽度，包括溢出部分
var scrollHeight = div.scrollHeight; // 内容总高度，包括溢出部分
console.log("clientWidth: " + clientWidth);
console.log("clientHeight: " + clientHeight);
console.log("offsetWidth: " + offsetWidth);
console.log("offsetHeight: " + offsetHeight);
console.log("scrollWidth: " + scrollWidth);
console.log("scrollHeight: " + scrollHeight);
</script>
</body>
</html>

复制代码

### 输出结果
- `clientWidth`: 220px (200px width + 10px padding on each side)
- `clientHeight`: 120px (100px height + 10px padding on each side)
- `offsetWidth`: 230px (200px width + 10px padding on each side + 5px border on each side)
- `offsetHeight`: 130px (100px height + 10px padding on each side + 5px border on each side)
- `scrollWidth`: 取决于内容的总宽度，如果内容没有溢出，则等于 `clientWidth`
- `scrollHeight`: 取决于内容的总高度，如果内容没有溢出，则等于 `clientHeight`

### 注意事项
- 如果你需要获取元素的尺寸，并且希望包括 `border` 和 `padding`，通常使用 `offsetWidth` 和 `offsetHeight`。
- 如果你只关心元素的可视部分（不包括 `border` 和滚动条），则使用 `clientWidth` 和 `clientHeight`。
- 如果你需要获取元素内容的实际尺寸（包括溢出部分），则使用 `scrollWidth` 和 `scrollHeight`。

希望这个解释和示例代码对你有帮助！如果你有更多关于Discuz或其他建站方面的问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。