Develop Reference

How to get height of a div tag if html is dynamically inserted?

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');

How to grab height of object tag content

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.

How to change the width/height element, which has settings in subclass

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

object.style.height doesn't work

I've googled this but didn't find an answer, this is strange. In Javascript in Firefox when I do object.style.height it doesn't return anything. Would anybody know why?
In CSS I've put
#movable {
height: 100px;
....
In HTML I've put
<div id="movable"> </div>
And in JS:
alert(movable.style.height);

You're trying to get the element's CSS height. If there isn't one defined in the element's style, that's what you get.
If you want the physical height, use object.offsetHeight

element.style is just a conversion of the element's style attribute into a scriptable object. If you haven't set any inline style on the element, you won't get anything back.
If you want to query the dimensions of an element, there are a number of ways, such as object.getBoundingClientRect().

Javascript style issue

I am using javascript to display the height of my current div.
This is an example of the effected area
//css
.test
{
height:1px;
}
#test1
{
margin:1px;
}
//html
<div id="test1" class="test"></div>
//javascript
var a = document.getElementById('test1');
a.style.height //how I access the style
Firebug says that the length of style is 0 and height is empty.
How can I access the correct height?

You need to look at the computed style, not the specified style. See Quirks mode's getstyle page which answers the question
Sometimes you'll want to see what styles the default document view has. For instance, you gave a paragraph an width of 50%, but how do you see how many pixels that is in your users' browser?
and it explains how to derive and use the getstyle function, though it's easier to use a library like jquery which provides a simple css function.

Try a.offsetHeight instead of a.style.height
jsfiddle demo

div height is dependent on its children. If its empty, it'll be 0.
The code you have to get height is correct, btw.

Check out the getComputedStyle method. It should do what you are looking for. Kinda lame, really, I wish this was handled better in the DOM.