I've a trouble with the style of nav element in my web application.
As you're able to see, if to focus on element nav#menu.horizontal-menu - I can see the actual width/height of that element in Chrome.
BUT! When I try to obtain that element in JavaScript by the id - menu (as you can see the tag declaration of nav tag in the bottom part of screen):
There is no both width or height values of it...
I rather understand, that it may be because of:
`nav#menu.horizontal-menu` != `nav`
But, it's only my suggestion... I've tried then to use both functions:
getElementsByClassName()
querySelector()
But... also no success as you can see in screens, what's wrong and how to get so needed actual width and height options from element?
Thanks!
I think you are looking for this answer:
How do I retrieve an HTML element's actual width and height?
.style.width only checks what is filled in in the style attribute of the element. OffsetWidth would probably work...
That's because there are no width and height styles defined for it.
To calculate the rendered width and height, use a.offsetWidth and a.offsetHeight. Those are the values that DevTools are showing on hover.
Have you tried:
var width = document.getElementById('foo').offsetWidth;
var height = document.getElementById('foo').offsetHeight;
For cross-browser compatibility I'm recommending you to use jQuery
Related
I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?
try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());
height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.
This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.
<div id="filterDropdowns" style="height:auto"></div>
try this
Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});
Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()
Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');
I just need to get the height of the content of an object tag when assuming the object is a webpage(on the same site.)
I appreciate any help in advance.
Thanks guys! I know there's a way to do it.
EDIT
<object id="blogs-and-stuff" data="blog/index.php" class="blog-stuff" type="text/html" style="width:900px; margin-left:50%;">
I want the height of index.php in the preceeding, not the height of ".blog-stuff".
$(".blog-stuff").height() //does not return what I need.
EDIT EDIT
Im trying to grab the height of the webpage inside the object tag and apply it to the object tag. This would increase the size of the object to show the entire webpage its holding rather than using scroll bars. Overflow is not working as planned.
This screen shot shows only the object with the webpage in it
Sorry for the confusion guys.
Access the content of Object
The real challenge seem to be how to access the content of the Object element. The solution I found is to use the contentDocument property of the object element. I put together a small test case where you log the height of the object content.
document.getElementById("object_id").contentDocument.body
Make sure the object content is loaded before you try and access its height.
<object id="test" data="test.html" ></object>
<button id="button">Log height</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#button").click(function() {
console.log(document.getElementById("test").contentDocument.body.getBoundingClientRect().height)
});
</script>
However, you will run into problem if try to load an external URL in your object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript
Then there are a few different methods that will get the height of an HTML element.
Pure JavaScript options:
element.style.height
document.getElementById("input_id_here").style.height;
Description:
The height CSS property specifies the height of the content area of an
element. The content area is inside the padding, border, and margin of
the element.
https://developer.mozilla.org/en-US/docs/Web/CSS/height
element.getBoundingClientRect().height
element.getBoundingClientRect().height
Description:
Returns a text rectangle object that encloses a group of text
rectangles.
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
element.clientHeight
element.clientHeight;
Description:
Returns the inner height of an element in pixels, including padding
but not the horizontal scrollbar height, border, or margin.
clientHeight can be calculated as CSS height + CSS padding - height of
horizontal scrollbar (if present).
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
HTMLelement.offsetHeight
document.getElementById("input_id_here").offsetHeight;
Description:
Height of an element relative to the element's offsetParent.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
jQuery options
*height("input_selector_here")*
$("input_selector_here").height()
Description:
Get the current computed height for the first element in
the set of matched elements.
https://api.jquery.com/height/
outerHeight()
$("input_selector_here").outerHeight()
Description:
Get the current computed height for the first element in
the set of matched elements, including padding, border, and optionally
margin. Returns a number (without "px") representation of the value or
null if called on an empty set of elements.
https://api.jquery.com/outerHeight/
innerHeight()
$("input_selector_here").innerHeight()
Description:
Get the current computed height for the first element in
the set of matched elements, including padding but not border.
https://api.jquery.com/innerHeight/
I do not like jQuery so my answer will use native javascript....
document.getElementById('your-object-id').getBoundingClientRect().height;
document.getElementsById("object").style.height
This should be the fastest solution, as it does not rely on an extra function call like the other jQuery solutions.
Firebug tells me the computed style of my_div:
width 300px
height 453.167px
Yet when I execute console.log(mydiv.style.height), it gives me an empty string, even though console.log(mydiv) logs the correct element. I am sure the page has loaded by the time this logging code is called. I'd appreciate a solution that does not use jQuery.
Depending on the browser of choice, one of these will do:
mydiv.offsetHeight
mydiv.clientHeight
Get full height of a clipped DIV
Getting the height of a div
UPDATE:
Many browser inconsistencies have been fixed since my original answer. Now the clientHeight property of a DOM element is reliable.
var height = element.clientHeight;
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
Original answer:
If you use the jQuery JS library, you can just do this:
var computed_height = $('#my_div').height();
If you use the Prototype JS library, it's similar:
var computed_height = $('my_div').getHeight();
Using a library is often the easiest & most cross-browser way to do something. Getting computed styles with vanilla js is unreliable because the properties are different across browsers.
Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.
If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/
You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method
I need to be able to store the current height and width of a div at any point in time.
Currently I am using div.style.height/width which works fine when the styling is applied inline.
The problem is that this returns for example 600px and not 600.
Is there a better way to do this? If not, whats the best way to get just the number 600?
My updated code looks like this:
var div = document.getElementById('container');
div.scrollLeft = contentdim.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = contentdim.cy*scalar - parseInt(div.style.height)/2;
Which works fine in FF. For some reason scrollTop is messing up in Chrome though..
Note: This is a function which is called onscroll for the div.
try div.offsetHeight || div.clientHeight
parseInt(div.style.height) is more generic than div.style.height.replace("px","")
However div.style.offsetHeight might be better because it does not rely on style being explicitly set (but you have to render the div before you can read the value)
div.style.height.replace("px","")
With jQuery, a bit more elegant, you can do it as well: http://api.jquery.com/height/
$("div").height()
//returns just the integer
To summarize the above:
document.getElementById('yourElement').style.height
CSS height if it has been set in a stylesheet. Will not include padding, margin, etc. If it is not set, you may wind up with values like auto.
document.getElementById('yourElement').offsetHeight
Height of the HTMLElement as rendered in the browser, including padding, scrollbars etc. (The total offset this Element's height consumes). Note that this often can be equivalent to clientHeight but that is not guaranteed.
Here is how offsetHeight is defined on Mozilla Developer Center. Note that there are a few differences with clientHeight, namely clientHeight does not include rendered scrollbars; offsetHeight will generally give you the maximum value.
Use jQuery:
height()
width()