How to get border width in jQuery/javascript

Question

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 inline styles though, but still can't get any value from an applied css class.

Answer 1

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.

Answer 2

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.