javascript - Getting values of global stylesheet in jQuery

Question

When I use a style sheet definition like this on HTML page scope

#sideBar {
  float: left;
  width: 27.5%;
  min-width: 275;
  ... 
}

the following code does NOT return the value of the CSS defined width:

document.getElementById("sideBar").style.width;

In this article a function it is shown retrieving the correct value, when I try to do so it dos not really work cross browser. So I have tried something similar in jQuery but failed.

$("#sideBar").css("width'"); // 1st trial
$("#sideBar").width(); // 2nd trial

I do get the absolute pixel width, not he percentage value 27.5. Is there a way to retrieve the percentage value as well?

Remark: Similar (but not the same) to SO Question: get CSS rule's percentage value in jQuery.

Answer 1

var width = ( 100 * parseFloat($("#sideBar").css('width')) / parseFloat($("#sideBar").parent().css('width')) ) + '%';

reference get CSS rule's percentage value in jQuery

here is the fiddle http://jsfiddle.net/jSGTs/