How can I get padding-bottom style value as a % with jQuery?

Question

I have a div with a % based padding-bottom, ie. padding-bottom: 10%;

When I run a simple

boxSize =  $('#secondBlob').css("padding-bottom");
alert(boxSize);

The result is actually a pixel value, not 10%; Was hoping to get a result of "10%" or "10". Any ideas?

Answer 1

this function

<div id="Div">Last Div</div>
<p class="salida">salida</p>

jquery

$('#Div').css({
    'padding-bottom':'10%',
    'background':'pink',
    'color':'#333'
});
$('.salida').text($('#Div').css('padding-bottom'));

=======================================

<div id="lastDiv" style="padding-bottom: 10%;">Last Div</div>
<br /><br />
<div id="output"></div>

#lastDiv {
    padding-bottom: 10%;
    width: 33%;
}

$("#output").text("CSS: "+$("#lastDiv").css("padding-bottom"));
//wrong
$("#output").append("<p>Style: " + $("#lastDiv")[0].style.width + "</p>");

or

<div>a</div>
<div>b</div>
<div style="right:80%;">c</div>
<p>
wrong
</p>

div:last-child{
    right:80%;
}$(function() {
var c =$('div').last().get(0);//.css('right');
$('p').text(c.style.right);
});

Answer 2

Well, it seems theres no clean way to do this :( But here is a hacky way to do it, and it does work:

$('.parent').hide();
var boxSize = $('#secondBlob').css("padding-bottom");
$('.parent').show();

alert(boxSize);