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

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 behavioural difference. It seems to work fine for inline styles though, but still can't get any value from an applied css class.

In the past, I've avoided problems like this by using visibility: hidden or setting an absolute position far outside the screen (i.e. left: -10000px). If you could do that, a simple $(elem).outerWidth(false) - $(elem).innerWidth() would get you the border width. — MikeWyatt
– MikeWyatt, Commented Sep 24, 2010 at 13:26

djdd87 · Accepted Answer · 2010-09-24 14:06:59Z

100

~~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.

edited Sep 24, 2010 at 14:06

answered Sep 24, 2010 at 13:24

djdd87

68.6k29 gold badges159 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

jwueller Over a year ago

+1! Hint: Always include the radix: parseInt(width, 10). Default is hexadecimal. parseInt("08") === 0 and parseInt("08", 10) === 8

Andrew B. Over a year ago

@elusive The default is decimal. For example, parseInt(10) === 10. What you're demonstrating is that parseInt will interpret the input as octal if it has a leading "0".

Peter V. Mørch Over a year ago

Beware, though, that IE can return non-numbers for border-whatever-width, and the CSS spec allows values of "thin", "medium" and "thick" too. This jsfiddle shows IE returning "middle" as a border-top-width. FF and chrome show it as 0px, and parseInt("middle", 10) returns NaN, so be sure to test in IE too. I'm still looking for how to get a number of pixels in every case.

Sam Watkins Over a year ago

re IE, if you detect IE ... change everything to 50pt comic sans and add a popup message linking to a decent browser using setInterval

Reinstate Monica Cellio Over a year ago

@SamWatkins I don't know how you've only 423 rep. That's the best advice I've ever seen on SO!

|

jedierikb · Accepted Answer · 2013-12-09 15:35:39Z

10

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

answered Dec 9, 2013 at 15:35

jedierikb

13.2k24 gold badges103 silver badges172 bronze badges

Comments

Ben Everard · Accepted Answer · 2010-09-24 13:25:48Z

9

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.

answered Sep 24, 2010 at 13:25

Ben Everard

13.8k14 gold badges69 silver badges96 bronze badges

5 Comments

fearofawhackplanet Over a year ago

nope, still can't get it to work if the style isn't inline. see jsfiddle.net/s7YAN/2

chris Over a year ago

@Ben Everard - jQuery does allow hyphnes - its just short-hand CSS that is not allowed - so left-border-width is ok, but border-width is not.

Jacob van Lingen Over a year ago

Your statement is not true. Changed fiddle to border-width and it still works: jsfiddle.net/s7YAN/500

Mission Mike Over a year ago

From jQuery's documentation: api.jquery.com/css --My experience is hyphens for CSS properties works within quotes. I use camelCase when setting multiple properties in an object, i.e.: $(this).css({borderWidth: "2px", borderColor: "blue"}); ..because hyphens are an operator when used outside quotes in JS, as opposed to a character.

Roy Shoa Over a year ago

This solution is not working at EDGE & FireFox, it will return string empty, you must calculate the border-left-width + border-right-width, etc.

Bryan · Accepted Answer · 2011-11-14 05:22:58Z

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

Vasyl Gutnyk · Accepted Answer · 2016-11-22 12:15:08Z

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

Collectives™ on Stack Overflow

How to get border width in jQuery/javascript

5 Answers 5

14 Comments

Comments

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

14 Comments

Comments

5 Comments

Comments

Comments

Linked

Related