Geek Answers Handbook

JQuery: $ ('div.myclass'). height () is inaccurate

Possible duplicate:
why does jquery.height () get a different result on chrome?

I have a <div> with myclass CSS myclass . The CSS class is as follows:

 .myclass { position: absolute; width: 192px; font-size: 11px; background-color: #FFF; padding: 15px 15px 0; box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4); display: block; }

He does not determine the height. PHP loads dynamically. In jQuery $(document).ready(function() { }); I am debugging div height by:

 console.log($('div.myclass').height()); // the result = 330

HTML:

 <div class="myclass"> <img src="image.png" /> <p>Text here text here</p> </div>

However, if I use the Inspect Element feature in Google Chrome, it shows 531px . Why is there a difference? How can I get the value of 531px ?

UPDATE : $(this).outerHeight(); // 345px, as there is 15px margin $(this).outerHeight(); // 345px, as there is 15px margin

+4
source share
3 answers

Try putting your code in a window load handler, just like your element has a 15px padding property, you should use the outerHeight method:

 $(window).load(function(){ console.log($('div.myclass').outerHeight()); });

Note that outerHeight takes a boolean, false means field exclusion, and true means adding a field, also note that externalHeight returns the height of the first matched element with this class name.

+12
source 
 console.log($('div.myclass').outerHeight());

OutherHeight also takes padding and margins into account.

EDIT: if you don't need margin, use innerHeight() .

+4
source

Actually that's for sure.

  • height () indicates the height of the block element without padding and field
  • innerHeight () function indicates the height of a block element with filling, but without a field
  • externalHeight () indicates the height of the block element with padding and mark
+3
source

More articles:


All Articles