第一百二十五章 宽高

有了样式我们就为所欲为了！？

这个链接元素的宽高是多少呢？用 css 方法是得不到的，因为行内元素没有宽高啊，设置了也不起作用。

可是一个元素，在页面中，总是要有一个尺寸的，它占用的面积，或者什么的。那它显示出来的尺寸是多少呢？

const width = $('a').width();const height = $('a').height();

获取的是宽高的尺寸，以像素为单位，但是获得的只有值，不带单位。类型是数字，不用转换，直接可以参与各种计算，十分方便。

这点还真的要注意，比如我们用 val 获得的数据一般是字符串类型，就算是一个只能输入数字（type="number"）的输入框，获取的值也是字符串类型。想进行数学计算，一定要先转换类型，否则……'1'+'1'='11' 就比较尴尬。

能获取，也能够用来设置：

$('a').width(12);$('a').height(12);

不过这个设置就弱一点，等效于：

$('a').css('width', '12px');$('a').css('height', '12px');

就是写起来简单，不用再特别加上单位了而已。你也可以给它指定单位，而不使用默认的像素作为单位。

宽和高就说完了，是不是觉得我这几章越来越短？！那我们继续……毕竟尺寸这个事情，哪有可能如此简单。

innerWidth 和 innerHeight 就是里面的宽度和高度。什么是里面？一个箱子，里面的尺寸，就是四壁之内的尺寸。所以这个宽高包含内补，不包含边框。

说到这里惊觉，上面的 width 和 height 说得好像很不明确啊，到底指的是怎样的宽高呢？这不太好说，尤其是考虑了 CSS 中的 box-sizing 属性之后。而且不同的 jQuery 版本，表现还不尽相同……所以，没啥特殊情况就别用它们了。

有了内部，就有外部：outerWidth 和 outerHeight。这是元素的外部尺寸，那就是边框以外的尺寸，默认不包含外补。但可以在后面的小括号里放一个布尔型的数据，来指定是否包含外补：

const width = $('#miao').outerWidth(true);const height = $('#miao').outerHeight(true);

这样获取到的值就包含外补。

但是，这些值都作为参考，不是绝对的准确，可能的影响因素还是很多的，可别说绝对，没有绝对。

可以获取，也可以用来设置。方法和 width 和 height 是一样的。但是效果上，是将设置的值减去了相应的内补、外补、边框宽度之后，以 CSS 中的 width 和 height 属性设置给元素的。

最好，自己动手试试，谁指的是哪部分的尺寸，设置出来的是什么效果，就很容易弄明白了。