CODEWITHSUNDEEP
jquerydocument
LeoYuan 袁力皓
LeoYuan 袁力皓

Reputation: 2431

why is $(document).height() different from $(document.body).height()?

I have been googling for a while, but still could not find why
is $(document).height() different from $(document.body).height()?

What's more, could anyone tell me the corresponding relation between the height methods
in jQuery and the raw JavaScript ones?

For example, $(document).height() is equivalent to document.documentElement.scrollHeight.

Upvotes: 5

Views: 2771

Answers (2)

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

Because the <body> element in your HTML is just another block element (much like a <div>), and as any block element, it can have dimensional styling (margin, padding, width, height, etc).

Considering that, the "size" of the <body> element does not need to correspond directly to the size of the document object (which corresponds to your whole HTML document as rendered, as a whole). One good reason is that the <body> element is also inside the <html> element, which is also a block element, and can have its own respective dimensionals.

If your <html> element, for example, had padding:10px, then your <body> element will definitely differ in effective size to the whole document entirely.

Now, don't get me wrong: document and document.body can have the exact same size (try checking StackOverflow's for example), but you have to understand that <body> is just another HTML block you can manipulate via CSS.

Upvotes: 4

Strangler
Strangler

Reputation: 1

I think the body has a standard margin. For the second part, I have no clue what you mean.

Upvotes: 0

Related Questions