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\')<

Answer 1

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

Answer 2

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 3

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

Answer 4

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.

Answer 5

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);