I am trying to determine the height of a specific element on my page. I have not set the height in the CSS, and regardless of the size of the window, the following code always returns the integer '100'.
var img_h = $("#compare_view").height();
console.log(img_h);
When I try a different div element on the page, it returns the integer '20'.
This is despite the fact that when I look at the element in Chrome's developer tools, it shows me a height of 415px or some other height in pixels (which is accurate).
Edit: Ok...it seems I have figured out that it is because it is returning a height of 100% for the parent element, and because there are 5 divs within the parent, each has a height of 20%. So I guess my new question is...how do I get it to return it in PX and not percent even though it is not set in Pixels?
Edit 2: Ok....that wasn't true. I just edited it using the following cod开发者_运维知识库e instead
var img_h = $("#compare_view").css('height');
console.log(img_h);
and it returned '100px'
So it is returning the value of the height in Pixels, but is clearly not accurate. So I am still at the original place I was - i.e. not sure why it is returning those weird numbers.
Edit 3: Here is the relevant CSS - this is the only section that is related to this div id:
#compare_view #compv-navbar {
font-weight: bold;
background: #f9f4c0;
height: 23px;
width: 220px;
border: 1px solid #c97d7d;
word-spacing: 0px;
letter-spacing: 2px;
margin: 0 0 15px 0; /* top, right, bottom, left */
padding: 5px 0px 7px 0px; /* top, right, bottom, left */
}
Note that this is not specifically to the div id="compare_view", but rather a child of compare_view.
compare_view has no height set in the stylesheet throughout my site.
The height()
method of jQuery returns the calculated height of an element. You see the difference because there are chances that element's height gets changed at some point/event during the load of the page. You need to check your inline styles, css or any javascript that might be changing its height.
精彩评论