Difference between style.width and offsetwidth in HTML? - javascript

I notice that offsetwidth is a slightly bigger number. Similarly for style.height and offsetheight.

offsetWidth returns computed element's width, while el.style.width just returns width property defined in element.style by javascript and does not reflect real element's dimensions.
This means that if you will try to get a width of the element by accessing el.style, you will probably get nothing (sample), even if the width was defined in your CSS. You will get the number only if it was defined in el.style by javascript.
Furthermore, offsetWidth gives you real width of your element, including padding and border if you use content-box css box model which is default value for box-sizing. So you can think about that like you set width of the contents of the element and padding/border go on top of that (sample).
If you are using border-box css box model, you set the total width of the element, including padding and border make the content area smaller (sample). So, in this case, offsetWidth and el.style.width would return exactly the same numbers (if el.style.width was previously set by javascript).

Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
Source: https://developer.mozilla.org/en/DOM/element.offsetWidth
So, it's the width of your element with border and padding included. Same thing for height.

offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars.
clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)
with only return the css with defined

Related

Difference between Element.scrollHeight and the height returned by height() method

What is the difference between Element.scrollHeight and the height returned by the JQuery $(ElementSelector).height() method.
I have seen this and this and I know that scrollHeight is the height of content, including the content which overflows outside the viewport. My question is that isn't that the same as the height returned by the height() method. I wrote this JSFiddle as a test of that.
Another difference is...
The height property sets the height of an element and does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element.
scrollHeight includes the element's padding, but not its border or margin.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
height():
returns the actual height of an element in pixels.
scrollHeight():
is a measurement of the height of an element's content including content not visible on the screen due to overflow
Learn more about Box Model.

What is the difference between offsetHeight and scrollHeight of an element in DOM?

In the DOM, what is the difference between an element’s offsetHeight and its scrollHeight? An image in explanation would be a great help.
HTMLElement.offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
HTMLElement.scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow. The value returned by HTMLElement.scrollHeight WILL include the padding-top and padding-bottom, but will NOT include the element borders or the element horizontal scrollbar.
This page and this page are my sources.
The MDN documentation also provides images to demonstrate.
As #Csarsam said, offset height is the border-box height (I'm rewording). Scroll height, is the height of the scrollable content, which is generally composed of multiple elements. But scroll height it also defined on elements which does not scroll, hence does not have a scrollable content, in which case (I’ve checked but I have no reference to back it up) scroll height is its content height, that is, it does not include the margins and borders. But when the element is part of a scrollable content, its margin are taken into account to compute the scroll height of its parent.
Scroll height is defined on both scrollable content and non‑scrollable content, that’s what may confuse.
Update
Here is a reference which confirms what I’ve checked: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Why document.body.scrollHeight can be greater than document.body.offsetHeight

I need help with this two elements properties.
According MDN element.scrollHeight "this a height of the scroll view of an element; it includes the element padding but not its margin", and element.offsetHeight "Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height."
I am trying to debug some javascript code and don't understand why document.body.scrollHeight can be greater than document.body.offsetHeight?
For example, my document.body.offsetHeight=909, but document.body.scrollHeight=1059 (body don't have any margins or paddings or borders), so we lost 150px somewhere. I inspected body and it height=909, and this is very confuse me. This reproduced in chrome and firefox.
Can you please help me in this question?
The offsetHeight property describes how far from the top of the current available space in the active window. The scrollHeight property is how far in pixels from the inside top of a contain to the inside bottom, which is different than clientHeight on a container set to a limited height with overflow:scroll css property.
I am using most of these in project I am working on at http://prettydiff.com/jsgui/

Get width of element with no css or width attribute

Scenario: You have a div with some text, this div has no css width, no jquery width, no width attribute assigned to it in any way. However it has a width due to the content that is inside it, this is undefined, reports as "null" in jQuery. My question is: is there any way to retireve the width of this div?
$(element).width() should give you the actual width. With $(element).outerWidth(includeMargin) you can even get the width including padding, border, and, if desired, the margin.
with jquery you can do below
$('#id').width()

determining the height of an element

After setting the height of some element (say a div) to auto, still can I get the height of this div in pixel or may be in some other units
You can use element.clientHeight or element.offsetHeight.
Or if jQuery is a choice, something like:
$("#element").height();

Categories