Get css value with pixels

Question

How can I get element width or height value which would be translated as a pixel number? All I got by using .css('width') are the expressions, not even a percentage number, like calc(-25px + 50%).

Edit

my code here. (Chrome)

var bars_width = element.css('width');
$('.histgram-content').css('width', bars_width);
bars_width = parseInt(bars_width.replace('px', '')) * 0.85;
$('.histgram-bar').css('width', (bars_width/data.length).toFixed(0).toString() + 'px');
/*** average Y ***/
var graph_height = $('.histgram-graph').css('height');
graph_height = parseInt(graph_height.replace('px', ''));

var average_height = $('.average-line').css('top');
average_height = graph_height - parseInt(average_height.replace('px', ''));

The average_height returns the expression I said. The last line got the result of 'NaN'.

Answer 1

Use window.getComputedStyle(),example: window.getComputedStyle($('div'))['width']

Answer 2

You can use any of jQuery's dimension related methods:

• width()
• height()
• outerWidth()
• outerHeight()

Working example

Answer 3

You can height

$('#element-id').height();

You can width

$('#element-id').width();