I want to get inner html height by JavaScript. Suppose I have
<div>Content</div>
either if the div font size has increased or many divs nested inside the parent, how do I get the height of parent div?
edit: even if the nested div has border and padding too.
The accepted answer is incorrect in the case that the parent element has a height of 0, and you want the height of the content within it (which is what I believe the OP was asking for). In that case, scrollHeight is the property you want.
const divInnerContentHeight = document.querySelector('div').scrollHeight;
Using clientHeight or offsetHeight would return 0;
If it must be in vanilla JS...
var height = document.getElementById('content').clientHeight;
That will not include any borders or scrollbars in the element, just padding. If you want to include borders and scrollbars you may use offsetHeight instead.
Use clientHeight and getElementsByTagName div to get spcific div height
document.getElementsByTagName('div')[0].clientHeight
http://codepen.io/nagasai/pen/XKoxZw
Something like this?
<div id="MyDiv">Content</div>
console.log(document.getElementById("MyDiv").offsetHeight);
Include padding and border in your height calculation:
document.getElementById('myDiv').offsetHeight;
//We can do his using JQuery
//Returns the element's height
$('#content').height();
// Returns the height with padding
$('#content').innerHeight();
// Returns the height with padding and border
$('#content').outerHeight();
// Returns the height with padding,border and margin
$('#content').outerHeight(true);
you can you content(ele) scrollheight to height of content.
ele.scrollHeight
Related
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.
offsetWidth isn't good enough for me right now, as this includes padding and border width. I want to find out the content width of the element. Is there a property for that, or do I have to take the offsetWidth and then subtract the padding and border width from the computed style?
Since this comes up first when googling but doesn't have an appropriate answer yet, here's one:
function getContentWidth (element) {
var styles = getComputedStyle(element)
return element.clientWidth
- parseFloat(styles.paddingLeft)
- parseFloat(styles.paddingRight)
}
Basically, we first get the element's width including the padding (clientWidth) and then substract the padding left and right. We need to parseFloat the paddings because they come as px-suffixed strings.
I've created a little playground for this on CodePen, check it out!
It sounds to me like you want to use getComputedStyle on the element. You can see an example of getComputedStyle vs. offsetWidth here: http://jsbin.com/avedut/2/edit
Or:
window.getComputedStyle(document.getElementById('your-element')).width;
I would suggest either scrollWidth or the clientWidth depending on whether you want to account for the scrollbar.
Check out Determining the dimensions of elements or the specification itself.
I have the similar issue where my parent element isn't the window or document... I am loading an image by Javascript and want it to center after loading.
var parent = document.getElementById('yourparentid');
var image = document.getElementById('yourimageid');
image.addEventListener('load'),function() {
parent.scrollBy((image.width-parent.clientWidth)/2,(image.height-parent.clientHeight)/2);
}
Whenever you set the src then it will scroll to the center of the image. This for me is in the context of zooming into a high res version of the image.
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
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()
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();