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

// 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

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.


  1. User Avatar
    Max K
    Permalink to comment#


    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. User Avatar
    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

  3. User Avatar
    Shoaib Bhimani
    Permalink to comment#

    @aimeeavant thanks

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.