<think>
我们之前已经讨论过如何使用jQuery
获取div的
宽度，现在我们来回顾并扩展一下。
获取div的
宽度有多种方法，具体取决于你想要
获取的是内容
宽度、内边距
宽度、边框
宽度还是包含外边距的
宽度。
以下是几种常用的方法：
1.
获取内容
宽度（content width）: 使用.width()方法
2.
获取包含内边距的
宽度（content + padding）: 使用.innerWidth()方法
3.
获取包含内边距和边框的
宽度（content + padding + border）: 使用.outerWidth()方法
4.
获取包含内边距、边框和外边距的
宽度（content + padding + border + margin）: 使用.outerWidth(true)方法
下面我们用代码示例来展示这些方法：
假设我们有以下HTML结构：
```html
<
div id="example" style="width: 200
px; padding: 10
px; border: 5
px solid black; margin: 15
px;"></
div>
```
使用jQuery
获取宽度：
```javascript
// 当文档加载完成时
$(document).ready(function() {
var contentWidth = $("#example").width(); // 内容
宽度: 200
var innerWidth = $("#example").innerWidth(); // 内容+内边距: 200 + 10*2 = 220
var outerWidth = $("#example").outerWidth(); // 内容+内边距+边框: 200 + 20 + 10 = 230 (10*2 padding + 5*2 border) -> 200+20+10=230? 实际上：200+20(padding)+10(border)=230? 注意：200是内容，padding左右各10所以是20，border左右各5所以是10，总共200+20+10=230
var fullWidth = $("#example").outerWidth(true); // 加上外边距: 230 + 15*2 = 260
console.log("content width: " + contentWidth);
console.log("inner width (with padding): " + innerWidth);
console.log("outer width (with padding and border): " + outerWidth);
console.log("full width (with margin): " + fullWidth);
});
```
注意：在实际运行中，上述数
值计算取决于盒模型。在标准盒模型下，
元素的总
宽度计算公式为：
总
宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
使用jQuery的.width()方法
获取的是内容区域的
宽度（即CSS中的width属性
值，不包括padding、border和margin）。
另外，如果
元素被隐藏（display: none），那么
获取的
宽度为0。
如果需要
获取包括滚动条在内的
宽度，需要注意：在
元素有滚动条的情况下，.width()返回的是可见内容区域的
宽度（不包括滚动条）。而原生DOM的clientWidth属性包括内边距但不包括滚动条，这与jQuery的.width()不同。jQuery的.width()方法返回的是内容
宽度，不包括滚动条。
如果你需要
获取包括滚动条在内的
宽度，可以使用原生的DOM属性：
```javascript
var element = document.getElementById('example');
var widthWithScrollbar = element.offsetWidth; // 包括内容、内边距、边框和垂直滚动条（如果有）的
宽度
```
但是注意，offsetWidth是包含边框的，相当于jQuery的.outerWidth()，但不包括外边距。
总结：
使用jQuery
获取div宽度的方法根据需求选择：
- 内容
宽度：.width()
- 内容+内边距：.innerWidth()
- 内容+内边距+边框：.outerWidth()
- 内容+内边距+边框+外边距：.outerWidth(true)
§§相关问题§§:
1. jQuery中如何设置
div的
宽度？
2. jQuery的width()方法和CSS的width属性有何区别？
3. 如何
获取带有滚动条
元素的可见
宽度？
4. 在响应式布局中，如何监听
元素宽度变化？
</think>
### 使用 jQuery
获取 div 宽度的完整指南
在 jQuery 中，
获取 div 宽度主要使用以下四种方法，每种方法对应不同的盒模型计算方式：
#### 1.
获取内容
宽度（默认）
```javascript
//
获取元素的纯内容
宽度（不包括 padding/border/margin）
const contentWidth = $('#my
Div').width();
console.log("内容
宽度:", contentWidth);
```
#### 2.
获取包含内边距的
宽度
```javascript
//
获取内容+内边距
宽度（content + padding）
const paddingWidth = $('#my
Div').innerWidth();
console.log("包含内边距的
宽度:", paddingWidth);
```
#### 3.
获取包含边框的
宽度
```javascript
//
获取内容+内边距+边框
宽度（content + padding + border）
const borderWidth = $('#my
Div').outerWidth();
console.log("包含边框的
宽度:", borderWidth);
```
#### 4.
获取完整盒模型
宽度
```javascript
//
获取完整盒模型
宽度（包含 margin）
const fullWidth = $('#my
Div').outerWidth(true);
console.log("完整盒模型
宽度:", fullWidth);
```
### 完整示例演示
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#dimensionBox {
width: 400
px; /* 内容
宽度 */
padding: 20
px; /* 内边距 */
border: 15
px solid navy; /* 边框 */
margin: 25
px; /* 外边距 */
background-color: #f0f8ff;
}
</style>
</head>
<body>
<
div id="dimensionBox">尺寸测量演示</
div>
<script>
$(function() {
const $box = $('#dimensionBox');
//
获取各维度
宽度
const results = `
内容
宽度: ${$box.width()}
px
含内边距: ${$box.innerWidth()}
px
含边框: ${$box.outerWidth()}
px
完整盒模型: ${$box.outerWidth(true)}
px
`;
// 显示结果
$box.after(`<pre>${results}</pre>`);
});
</script>
</body>
</html>
```
### 关键注意事项
1. **返回
值类型**：所有方法返回纯数字（像素
值），无单位
2. **隐藏
元素**：对 `display: none`
元素获取结果为 `0`
3. **窗口缩放监听**：响应式设计中监听
宽度变化：
```javascript
$(window).resize(function() {
console.log("当前
宽度:", $('#responsive
Div').width());
});
```
4. **动画过程中的
获取**：使用 `requestAnimationFrame` 确保准确
获取：
```javascript
$('#animated
Div').animate({width: '500
px'}, 1000);
requestAnimationFrame(function logWidth() {
console.log("动画中
宽度:", $('#animated
Div').width());
if (/* 动画未结束 */) requestAnimationFrame(logWidth);
});
```
### 特殊场景处理
**SVG
元素宽度获取**
```javascript
const svgWidth = $('#svgContainer')[0].getBoundingClientRect().width;
```
**带滚动条
元素可见
宽度**
```javascript
const visibleWidth = $('#scrollable
Div')[0].clientWidth;
```
**相对父
元素的百分比
宽度**
```javascript
const percentageWidth = ($('#child
Div').width() / $('#parent
Div').width()) * 100;
console.log(`相对父
元素宽度: ${percentageWidth.toFixed(1)}%`);
```
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
