How to get border width in jQuery/javascript

How do I parse the border width from

style="border: solid 1px black;"

in jQuery/javascript?

$elem.css('border-width')

doesn't do it.

Note I need to parse the width from the css, as the element may be display:none

Thanks

Edit I'm not actually using an in-line style, I just wrote it that way for simplicity as I didn't realise there was any behavoural difference. It seems to work fine for inlin开发者_开发百科e styles though, but still can't get any value from an applied css class.

You can just use parseInt(); to parse the border width from Npx to N:

var width = $elem.css('borderWidth'); // 150px
var parsed = parseInt(width);         // 150

I had a Google around and it appears in order to get the width of a border you must provide an explicit side of the border:

var borderWidth = $elem.css("border-left-width");

This is because it's possible for every border to have a different size, style and colour. Unfortunately it doesn't appear to be any simpler than this.

jQuery doesn't allow the use of - when referencing a CSS property, so remove the hypen and capitalise the following letter.

$elem.css('borderWidth');

Coded in jsFiddle to demonstrate.

var bordersOnBothSides = $("#measureMe").outerWidth() - $("#measureMe").innerWidth() );

To complete Generic's answer when seeking he left border and to include elusive's comment about radix:

<div style="border-style:solid;border-left-width:15px;"></div>

in script:

var width =parseInt($('div').css('borderLeftWidth'),10);
alert(width);

If u have equal border widh for element, or u need left, top border width, plain js:

elem.clientLeft; //get left border of element
elem.clientTop; //get top border of element

To get right, bottom border use jquery+css:

parseInt($(elem).css('borderLeftWidth'),10); // 10 use to get result in dec, not hex number system