FACTS:
clientHeight: Returns the height of an element, including padding
offsetHeight: Returns the height of an element, including padding, border and scrollbar
Conclusion:
offsetHeight should return more pixels than clientHeight. offsetHeight is bigger than clientHeight.
Question:
When I use these two properties on HTML tag, it returns 8 from offsetHeight and 778 from clientHeight.
Why's that? offsetHeight should be bigger than clientHeight, shouldn't it?
Then why is it only 8 pixels? What's happening here?
Code:
<!DOCTYPE html>
<html id = "foo">
<body>
<script>
var element = document.getElementById('foo');
var osHeight = element.offsetHeight;
var cHeight = element.clientHeight;
document.write("Offset Height is " + osHeight + "<br/>");
document.write("Client Height is " + cHeight);
</script>
</body>
</html>
Output:
Offset Height is 8
Client Height is 778
the clientHeight property is special for the html element. It returns the height of the browser's client area without the horizontal scrollbar for any doctype.
If no doctype is specified, the clientHeight property of the html element contains different values in the browsers.
detail:http://help.dottoro.com/ljcadejj.php
the offsetHeight property is special for the html element.
It returns the height of the browser's client area without the horizontal scrollbar in Internet Explorer like the clientHeight property of the html element.
In Firefox, Opera, Google Chrome and Safari, it returns the total height of the document.
detail: http://help.dottoro.com/ljuxqbfx.php
if you set *{padding:0px;margin:0px;} in css, offsetHeight will return 0 ;
http://jsfiddle.net/ufxt5Lzq/1/
Here, the client height is the height of the browser window. But since your html code is empty (i.e. it does not have any content), hence the offset height is 8 which is only the height of the area occupied by the <html> tag.
Isn't it a browser issue...? This is the output from Maxthon 4.4.3.2000 console. I ran the code on this page.
As stated by some of the other answers here, you're checking the height of a blank HTML element with no style customizations, so the clientHeight and offsetHeight are going to be the same regardless. The content you're writing to the element are not inserted until after the document is loaded and the heights are checked, therefore producing a weird result.
Take a look at this JSFiddle. I've set up a check on an element that has content and a border. You are indeed correct that offsetHeight is larger.
If you need to do checks on an element's size, height or width, you need to do these checks after you've manipulated the innerHTML, or you won't get an accurate result because you're checking the original element size instead of the manipulated element size.
CSS:
#foo {
border: 3px solid #000;
height: 24px;
padding: 6px;
margin: 6px;
overflow: scroll;
}
HTML:
<div id="foo">
Guess my height?<br />
<br />
<br />
</div>
<div id="height"></div>
JS:
function writeLn(content) {
document.getElementById('height').innerHTML += content + '<br />';
}
function showHeights() {
var element = document.getElementById('foo');
var osHeight = element.offsetHeight;
var cHeight = element.clientHeight;
writeLn('element.offsetHeight = ' + osHeight);
writeLn('element.clientHeight = ' + cHeight);
}
showHeights();
Related
I am using the code from https://stackoverflow.com/a/24676492/4997994 and modifying it for my question (mainly replacing element.style.height = "5px" with element.style.height = "0px"). My question is why do we even need to reset the textarea height before setting its height with its scrollHeight ?
function auto_grow(element) {
element.style.height = "0px"; // why do we even need this line ?
element.style.height = (element.scrollHeight)+"px";
}
<textarea oninput="auto_grow(this)"></textarea>
It does give weird behavior with this line element.style.height = "0px" commented out as can be seen by running the code snippet below but what is causing this ? Does the scrollHeight attribute compute its value in a different way when the textarea height is not reset in the oninput handler ?
function auto_grow(element) {
console.log(`Before- ${element.scrollHeight}`);
// element.style.height = "0px";
element.style.height = (element.scrollHeight)+"px";
console.log(`After- ${element.scrollHeight}`);
}
<textarea
oninput="auto_grow(this)"></textarea>
There's a couple of things going on. The textarea starts with an initial content height, a padding of 2px (on all sides, but specifically for this case, top and bottom) and a box-sizing of content-box.
The next thing to understand is how the scrollheight of an element is calculated. It's from the top edge of the scrolling area to the bottom edge. The top edge is the top edge of its padding box. The bottom edge is defined as
The bottom-most edge of the element’s bottom padding edge and the bottom margin edge of all of the element’s descendants' boxes, excluding [not relevant in this case].
The text content generates descendant boxes, so this means that when you measure the scrollHeight of the textarea, that's the height of top padding plus the maximum of the existing set content height + bottom padding and the text height.
By setting the content height to 0px first, it's reducing that scrollHeight to the height of top padding plus the maximum of the bottom padding and the text height, which for all practical purposes is always going to be the height of the text.
So the final content height set will always be set to the height of the contained text plus the top padding.
Is there a way to get the entire width of a div including margins without using JQuery?
div.outerWidth
doesn't seem to work and clientWidth excludes margins.
As far as I recall, there is no single property value to get this.
Basically you need to get the margin width (left and right) and add them to your existing dimensions. Additionally, unless you are using box-sizing (By default you are not) you will need to add padding left and right as well.
You can use getComputedStyle to get the actual values you require. For example:
window.getComputedStyle(element, null).getPropertyValue("margin-left");
Edit:
I forgot border :P.... left and right border width as well...
Please have a look below code, there is being alert total width of div 220 including margin.
<style>
#myDiv{
width:200px;
height:200px;
margin:10px;
}
</style>
<div id='myDiv'>
</div>
<script>
var div = document.getElementById('myDiv');
var style = window.getComputedStyle(div);
var leftMargin = parseInt(style.marginLeft.match(/\d+/));
var rightMargin = parseInt(style.marginRight.match(/\d+/));
alert(div.clientWidth + leftMargin + rightMargin);
</script>
I have the following elements in a HTML page:
<body>
<div style="height:100%; width:100%">
<div style="height:100px;"></div>
<div id="container" style="height:25%; width:50%">
</div>
Now I would like to get the height in pixels of the div container using jQuery (or plain JavaScript).
How can I do it?
$('#container').height() // returns `0`
In CSS, height as a percentage doesn't work unless the parent element also has height defined. And the parent's height won't work (if it's a percentage) unless its parent has height defined, and so on.
In this case, try adding this to your CSS:
html, body {
height: 100%;
}
Update: The other reason your code is returning 0 is because the DIV doesn't have any children (not even text nodes). If you added a child node, it would return the height of that child node, but it still wouldn't return the 25% value until you add an explicit height to all parents of elements that define height in percentages.
With the code you provided, "0" is the correct answer. -- As mentioned in a comment below : Divs are block by default. The reason this resolves to "0" is because in this instance, the container that it is deriving the "%"s from, are 0. So you are essentially saying : height = 0 * .25;
You need to either specify size of the div and its parent OR there need to be child nodes which grow the div's size naturally.
Then $('#container').height() will return a value larger than 0
You can do this Height_String= new String($('#container').css('height'))
the out put is 19px as string
or
You can do this Height_Int = new Number (parseInt($(#container).css('height'), 10))
the output is 19 as integer
$('#container').css('height');
The height is returned as 0 because the computed #container height is 0. Assigning a % height to a div without any relative fixed height will be assigned to 0.
See DEMO why it returns 0.
If your block has visible height other than zero, then probably you call jQuery.height() before page is loaded. Wrap your call into $(document).ready(function() {});:
$(document).ready(function() {
/* some actions */
var h = $('#container').height(); // Height that you need.
});
With simple JavaScript syntaxe it's works perfectly, but it's return the height in percent :
document.getElementById('container').style.height
I have a DIV element where I can add and remove contents from it, and based on my readings, the scrollHeight property is a measure of the DIV's content height. I have a portion of javascript code that sets the DIV to a specific height based on the scrollHeight property:
if (div.scrollHeight <= 25)
{
div.style.height = "25px";
}
else if (div.scrollHeight > 25)
{
div.style.height = "50px";
}
The code works with IE6 and IE7, but when it is run in IE8, once the style height is set to a value of 50px, the scrollHeight property keeps returning a value of 50px even though I removed some of the DIV's content to make it fit a 25px height. So the problem is that the size of the DIV does not contract to the smaller size after its expansion under IE8. May I get help with fixing this up?
Maybe some of the elements are not totally removed from IE's nodelist?
Try to set them as null and then reload the content.
Browsers have default padding for HTML page.
For example my FF sets 8px margin of body element by default.
I can calculate default width padding for HTML page using
jQuery(window).width() - jQuery('body').innerWidth();
due to body element spans all available browser viewport width.
Also I have other browser which sets different values for width and height padding.
Could you propose way to calculate height padding?
Previous code will not work due to body inner height will return actual page content height and will not span all available height.
Do you really need to calculate the padding? The padding is defined in an element's css setting for padding and margin.
You can get these easily in jQuery:
// Select the body element.
var bodyElement = $('body');
// Get the paddings
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right');
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom');
// Get the margins
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right');
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom');
You can remove the default user-agent (i.e. the browser's) settings by defining in your css file:
body {
margin: 0;
padding: 0;
}
Bypass the problem and use a CSS reset.
With a good reset, you will not have to calculate these as they will be set by yourself.