Click here to Skip to main content
12,885,268 members (36,281 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 12 Nov 2013

Some jQuery Getters Are Setters As Well

, 12 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Some jQuery getters are setters as well

A couple of days ago, I ran into an interesting characteristic of jQuery -

Some methods which are 'getters' are also 'setters' behind the scenes.

I know this sounds weird, and you might even be wondering why the hell this matters... Just keep reading and I hope you'll understand... :)

If you call the element dimension methods in jquery (which are height(), innerHeight(), outerHeight(), width(), innerWidth() & outerWidth()), you'll probably be expecting it to just check the JavaScript object properties using simple JavaScript and return the result.

The reality of this is that sometimes it needs to do more complicated work in the background...

The Problem

If you have an object which is defined as 'display:none', calling 'element.clientHeight' in JavaScript, which should return the object's height will return '0'. This is because a 'hidden' object using 'display:none' isn't rendered on the screen and therefore the client never knows how much space it visually actually takes, leading it to think its dimensions are 0x0 (which is right in some sense).

How jquery Solves the Problem For You

When asking jquery what the height of a 'display:none' element is (by calling $(element).height()), it's more clever than that.

It can identify that the element is defined as 'display:none', and takes some steps to get the actual height of the element:

  • It copies all the element's styles to a temporary object
  • Defines the object as position:absolute
  • Defines the object as visibility:hidden
  • Removes 'display:none' from the element. After this, the browser is forced to 'render' the object, although it doesn't actually display it on the screen because it is still defined as 'visibility:hidden'.
  • Now the jquery knows what the actual height of your element is
  • Swaps back the original styles and returns the value

Okay, So Now That You Know This, Why Should You Even Care?

The step that jquery changes the styles of your element without you knowing, which forces the browser to 'render' the element in the background can take time. Not a lot of time, but still it takes some time. Probably a few milliseconds. Doing this once wouldn't matter to anyone, but doing this many times, let's say in a loop, might cause performance issues.

Real Life!

I recently found a performance issue on our site that was caused by this exact reason. The 'outerHeight()' method was being called in a loop many times, and fixing this caused an improvement of ~200ms. (I hope that by now I don't have to explain the importance of 200ms and the effect it can have on your ecommerce site!)

I will soon write a fully detailed post about how I discovered this performance issue, how I tracked it down, and how I fixed it.

Always a Good Tip!

Learn how your libraries are working under the hood. This will give you great power and a great understanding of how to efficiently use them.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Gilly Barr
Web Developer
Israel Israel
Started programming e-commerce sites with PHP & MySQL at the age of 14. Worked for me well for about 5 years.

Transfered to C# &, while serving in the IDF.
Worked on the 'Core Performance' Team at (Sears Israel)
Currently working at

Check out my blog!
or my twitter

You may also be interested in...

Comments and Discussions

QuestionWonderful tip! Pin
Forogar 24-Nov-13 5:10
member Forogar 24-Nov-13 5:10 
AnswerRe: Wonderful tip! Pin
Gilly Barr2-Dec-13 21:08
memberGilly Barr2-Dec-13 21:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 12 Nov 2013
Article Copyright 2013 by Gilly Barr
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid