I have elements with an external style of height with percentages. when I am trying to save the height as a variable to use, it is saving it as pixels some times nothing.

html For example:

<div id='firstDiv'></div>
 <div id='secondDiv'></div>

css code

#firstDiv{
    width:50%;
    height:50%;
}
#secondDiv{
   width:20%;
   height:50%;
}

Jquery code

$('div').each(function (){
   console.log($(this)[0].style.height);
}

how can i get it as %?

I have elements with an external style of height with percentages. when I am trying to save the height as a variable to use, it is saving it as pixels some times nothing.

html For example:

<div id='firstDiv'></div>
 <div id='secondDiv'></div>

css code

#firstDiv{
    width:50%;
    height:50%;
}
#secondDiv{
   width:20%;
   height:50%;
}

Jquery code

$('div').each(function (){
   console.log($(this)[0].style.height);
}

how can i get it as %?

• javascript
• jquery
• html
• css

• there is no way to get in percent but some trick height/100 would help ?? – Bhojendra Rauniyar Commented Apr 23, 2014 at 6:28
• 1 $(this)[0] can just be replaced by this, can't it? – King King Commented Apr 23, 2014 at 6:29
• and explain why do you need actually this in percentage ??? we could use an alternative for that.... – Bhojendra Rauniyar Commented Apr 23, 2014 at 6:32
• Check this stackoverflow./a/4006610/3153869 Hope, it will help – makambi Commented Apr 23, 2014 at 6:37
• This is for width but you can use it for height as well - stackoverflow./questions/23235461/… – Pooja Shah Commented Apr 23, 2014 at 6:41

5 Answers 5

To get the value in %, you can divide the value with either the top most node [1st parent in dom]

 parseFloat($(this)[0].style.height / $('#idOfFirstParent').height ()) * 100;

, if you want to get the value in reference to the 1st parent in the DOM or by width of the document [this will start with 0,0 of your screen].

 (parseFloat($(this)[0].style.height/ $('window').height ()) * 100).toFixed(2);

                         or 

 (parseFloat($(this)[0].style.height / $('document').height ()) * 100).toFixed(2);

Try this, not direct option in jQuery.

var height = ( 100 * parseFloat($(element).css('height')) / parseFloat($(element).parent().css('height')) ) + '%';

Just calculate the percentage:

var w = $("#myDiv").css("width").slice(0,-2);
var ww = $(window).width();
console.log(w/ww*100);

Use parseInt(string). It removes the chars after any numbers if the string begins with numbers

$(this).height() will give height of your divs in percentage(as they have been set in percentage) and will be unit less.