The concept of getters and setters in JavaScript is just one of those things you should understand. They are nice in jQuery because the API is so consistent that once you get it, you can pretty much just guess how it is going to work for various methods. At the most basic level...

Setters do something.
Getters return a value.

Often a single method can be used either way. Take the height method for example.

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

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

See the difference? The setter passes a parameter when the method is used. The getter passes nothing. That's how jQuery itself knows what to do. It just tests if there is a parameter there or not. If not, it behaves like a getter. If it is there, it behaves like a setter. It's merely a nice API convenience, rather than having separate methods like getHeight and setHeight.

It's worth noting that a getter used by itself does nothing.

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

And if you set the value of a variable using a setter, you'll get the jQuery object returned.

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

That can be a hair confusing, but also a nifty little trick for saving code. If you know you need to both cache that jQuery object and set it's height, might as well do it in one line of code.

See the Pen 8ff68485673396d452f650bfb437fb2a by Chris Coyier (@chriscoyier) on CodePen

Also mentioned in the article is box-sizing: border-box;. Box sizing is a super useful CSS property. I'm a big proponent of setting it on all elements, like:

* {
  box-sizing: border-box;
}

As noted in the video, this also makes height() in jQuery a bit more predictable and consistent. Without border-box set, height() is equal to the height property in CSS, or whatever height the element naturally is, minus the padding and border. With border-box set, the height() is exactly how much height that element takes up on the screen, including padding and border. Without border-box set, to get that, you need to use outerHeight() in jQuery.

Comments

  1. Max K
    Permalink to comment#

    Chris,

    When you set box sizing to border-box .height still doesn’t work the same as .outerHeight. The borders are not included in the calculations on Chrome Version 30.0.1599.101 m.

    Is that a known issue?

  2. aimeeavant
    Permalink to comment#

    I had the same issue and decided that height returns the calculated height, so it will always be different than outerHeight when using box-sizing.

    “Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( “height” ) rather than .height().” from http://api.jquery.com/height/

  3. Shoaib Bhimani
    Permalink to comment#

    @aimeeavant thanks

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.