Geek asks and answers

How to get x% height in px?

I gave 100% the height of the div, and I want the actual height in px.
How to know the height of this div?

+5
source share
4 answers

With jquery, you can use this when the container is a div id:

$(document).ready(function() {
    alert($('#container').height());
});
+6
source

Using jQuery, you can use:

$('#div').height();

+4
source

, jQuery, :

$(document).ready(function(){
   $("#container").height();
});

, height jQuery. :

, .hight() , , CSS-.

, , , .

, , , , , :

innerHeight()

$(document).ready(function(){
   $("#container").innerHeight();
});

, , .

outerHeight()

$(document).ready(function(){
   $("#container").outerHeight(); //Include padding and borders
   $("#container").outerHeight(true); //Include padding, borders and margins
});

, , , ( true ).

. DEMO

, 300px div. , css margin-top 20px, padding-top 50px, 5px, .

- ()

, jQuery height() 300 , , css.

- innerHeight()

, jQuery innerHeight() 350 , 300 div + 50 .

- externalHeight()

Notice how jQuery outerHeight()returns 360 pixels, which is 300 of div + 50 for padding + 10 for border (5 bottoms and 5 tops).

Demo output for externalHight (true)

Notice how jQuery outerHeight(true)returns 380 pixels, which is 300 from div + 50 for padding + 10 for border (5 bottom and 5 top) + 20 from the field.

+2
source

Here's a solution without using jquery

document.querySelector("#yourElementIdGoesHere").getBoundingClientRect();

This function will return an object with the following properties

  • lower
  • Height
  • to the left
  • to the right
  • upper
  • width

Just take the width and height from there, they are in pixels

-N

0
source

More articles:


All Articles