the alerts are as follows:
alert(document.getElementById("col_st_scroll").offsetHeight);
alert(document.getElementById("col_st_scroll").style.height);
now, the col_st_scroll element is fully visible in the web browser, shouldn't that mean offsetHeight and style.height should returnt he same value?
problem solved. The element was resized by another function in the time it took to click ok ont he first alert.
This is from MDN:
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.
The style.height property represents the content height only (assuming you're on "strict" rendering mode, not "quirks").
Related
I tried to calculate offSetWidth of a div element which has the following css properties:
1)Height:500px
2)overflow:auto
3)dir:rtl
4)box-sizing:border-box
I added less content in the div so that the div does not show any scroll and used offSetWidth property to calculate offSetWidth and it was 1302.
Then I added more content so that the browser started adding a scrollbar to the div. I again used offSetWidth property to calculate the offSetWidth with scrollbar in the div.
The result was surprisingly 1302 again.
Now I'm unable to figure out the reason why the offSetWidth of the div is same when the div has scrollbar and when it does not have scrollbar.
Please help me in this regard.
THANKS IN ADVANCE
It's possible that the scrollbar is being included in the offsetWidth calculation even when it's not visible.
To confirm this, you can try using the clientWidth property instead, which returns the width of the content area of the element excluding padding but including the scrollbar (if any). If the clientWidth changes when you add more content and the scrollbar becomes visible, then this confirms that the scrollbar is being included in the offsetWidth calculation.
Alternatively, you can try using the scrollWidth property, which returns the total width of the content area of the element, including any parts that are currently hidden because of overflow. If the scrollWidth is greater than the clientWidth, then this confirms that the scrollbar is present and the offsetWidth includes it.
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
I have a problem getting the width of a div's content (of the content, not the div itself).
The usual approach would be Javascript's scrollWidth property, I think.
The problem: within this div, another div is positioned absolute and has a negative right value (-350px). I can't change this (it's a menu, sliding in when you click a button, overlapping other elements. It needs to be positioned like that).
The scrollWidth returns the width of the outer div's content PLUS the negative right-value (in Chrome, didn't test other browsers).
Here's a short example:
/* ... */
http://jsfiddle.net/R4Cs5/12/
But I need the content's width that is accessible by scrollbars.
Any ideas?
Please use Jquery, no plain Javascript.
Thanks in advance.
I see that your jsfiddle doesn't import any jQuery library, while you wanted to use it. Anyway, with jQuery you can use .width to get an element's width see here: jsfiddle.
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/
Suppose I have a div in my page, that doesn't have a width property manually set.
A user can resize his window, and so this div has, visually, a new "size" (dynamic). Is this new size (in px value terms) available somewhere? Like, "div.getCurrentSize" or something like that?
So, is it possible to get this width value from this div using something like javascript?
Look at the jQuery dimensions methods, e.g.
var w = $('#id').width();
Also note that it's not usually possible to obtain the dimensions of any element that's hidden. If you set the display property to none then the dimensions will all read as zero.
outerWidth
Description: Get the current computed width for the first element in the set of matched elements, including padding and border.
How about the standard javascript
(obj).offsetWidth