在前端开发中，我们常常需要获取元素的宽度，而其中一个常用的方法是使用jQuery的innerWidth()函数。然而，有时候我们并不想包括填充（padding）在内，那么该怎么办呢？这篇文章将为你详细介绍如何使用jQuery获取元素的innerWidth但不包括填充。
什么是innerWidth？
在深入探讨如何获取innerWidth不包括填充之前，先来了解一下什么是innerWidth。
简单说，innerWidth代表元素的宽度，包括可见内容区和内边距（padding），但不包括边框（border）和外边距（margin）。具体来说，innerWidth可以用以下公式计算：
---------- - ------- ----- - ------- ---- - ------- -----
如果要计算innerHeight，则是同样的方式，只不过把width替换成height即可。
获取innerWidth不包括填充
默认情况下，jQuery的innerWidth()函数会返回一个包括填充的值。但在某些情况下，我们可能需要获取不包括填充的值，例如当我们需要对元素进行定位或计算布局时。
那么，如何获取innerWidth不包括填充呢？答案是使用原生的JavaScript属性clientWidth。
clientWidth表示元素的可见内容区宽度，不包括内边距和边框。通过获取元素的clientWidth属性，我们可以获得不包括填充的innerWidth，具体代码如下：
--- ------- - -------------------- --- ------------------------ - --------------------
上述示例代码中，$('.my-element')是一个jQuery选择器，用于选中页面中的某个元素。注意，必须使用[0]取出DOM元素，以便直接访问其原生JavaScript属性。然后，通过获取clientWidth属性，我们就可以获得该元素的innerWidth但不包括填充。
需要注意的是，clientWidth是一个只读属性，不能被修改。
总结
在本文中，我们介绍了什么是innerWidth以及如何使用jQuery获取innerWidth但不包括填充。通过使用原生的JavaScript属性clientWidth，我们可以轻松地获得元素的innerWidth但不包括填充。这对于定位和计算布局等任务非常有用。
最后，提醒大家当我们需要获取元素尺寸时，应先考虑是否有现成的API可用，如果没有才采取更加复杂的方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24651