#09：获取器和设置器

JavaScript 中的获取器和设置器概念是你应该理解的那些东西之一。它们在 jQuery 中很不错，因为 API 非常一致，所以一旦你理解了，你基本上就可以猜到各种方法是如何工作的。在最基本的层面上...

设置器 **执行** 某些操作。
获取器返回 **值**。

通常，单个方法可以以两种方式使用。以高度方法为例。

// Used as a "setter" - will set the height
$("#example").height(100);

// Used as a "getter" - will return a value
var theHeight = $("#example").height();

看到区别了吗？设置器在使用该方法时 **传递参数**。获取器 **不传递任何内容**。这就是 jQuery 本身知道该做什么的方式。它只是测试那里是否有参数。如果没有，它就表现得像一个获取器。如果它在那里，它就表现得像一个设置器。这仅仅是一个不错的 API 方便性，而不是使用诸如 getHeight 和 setHeight 之类的单独方法。

值得注意的是，单独使用的获取器不会执行任何操作。

// Useless
$("#example").height();

如果你使用设置器设置变量的值，你将得到返回的 jQuery 对象。

// x will be a jQuery object containing #example
var x  = $("#example").height(100);

这可能有点令人困惑，但也是一个保存代码的小技巧。如果你知道你需要缓存该 jQuery 对象并设置其高度，不妨在一行代码中完成它。

查看 CodePen 8ff68485673396d452f650bfb437fb2a，由 Chris Coyier (@chriscoyier) 在 CodePen 上创建

文章中还提到了 box-sizing: border-box;。 盒子大小 是一个非常有用的 CSS 属性。我强烈建议将其设置在所有元素上，例如

* {
  box-sizing: border-box;
}

正如视频中提到的，这也使 jQuery 中的 height() 更加可预测和一致。如果没有设置 border-box，height() 等于 CSS 中的高度属性，或者元素的自然高度减去填充和边框。设置了 border-box 后，height() 恰好是元素在屏幕上占用的高度，包括填充和边框。如果没有设置 border-box，要获得该高度，你需要在 jQuery 中使用 outerHeight()。