【jQuery】获取元素高宽的三个方法和注意点

目录

方法一：使用 width() 和 height() 方法

方法二：用 css() 方法

方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法

计算元素高宽的方法总结：

---

jQuery中获取元素高宽时还是有些地方需要注意的，省时间的话直接跳到底部总结。

这是页面结构，就一个ID 为box 的div

我们如何获取id为box的div的宽高呢？

可以用以下方法：

 

方法一：使用 width() 和 height() 方法

控制台输出：

注意点：

1.用width() 和 height() 方法获得的是元素内容区(content)的宽高。(你可以去上面看看我设置的padding和margin)

2.并且获得的值是不带px单位的，这个值可以直接参与运算的。

---

方法二：用 css() 方法

控制台输出：

注意点：

1.用 css() 方法获得的也是元素内容区(content)的宽高。

2.获得宽高的值是带px单位的，这个值不能直接参与运算。

---

方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法

这里我就只拿 innerWidth() 方法和 outWidth() 方法进行比较，innerHeight() 和 outHeight() 也是一样的计算规则。

控制台输出：

上面的css不用往上翻了，再贴一遍↓↓↓↓

从控制台输出的结果我们可以知道：

innerWidth() :     220 = 内容区width + 2*padding = 200 + 2*10  (不带px单位)

innerWidth() 计算的区域(红色区域)：

                                                                 

outWidth() :        226 = 内容区width + 2*padding + 2*border = 200 + 2*10 + 2*3 (不带px单位)

outWidth() 计算的区域(红色区域)：就比  innerWidth()  多加了border！！！

                                                                 

计算元素高宽的方法总结：

方法一：使用 width() 和 height() 方法

注意点：

1.用width() 和 height() 方法获得的是元素内容区(content)的宽高。

2.并且获得的值是不带px单位的，这个值可以直接参与运算的。

 

方法二：用 css() 方法

注意点：

1.用 css() 方法获得的也是元素内容区(content)的宽高。

2.获得宽高的值是带px单位的，这个值不能直接参与运算。

 

方法三：用 innerWidth() 和 outWidth() 方法，以及 innerHeight() 和 outHeight() 方法

innerWidth() : width +2*padding  (不带px单位)

outWidth() :    width + 2*padding + 2*border (不带px单位)

看到这那恭喜你，你已经理清width(), innerWidth ,outWidth() 之间的计算规则了。

                                                                            希望我的文章可以帮到你