Better way to get the border width in javascript?

Question

I use this :

var playGard =document.getElementsByClassName("playGard")[0];

var borderW= getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2);

I get the value "10".

There is a better shorter way in javascript?

(Get the value as a number)

Possible duplicate of [How to get border width in jQuery/javascript](http://stackoverflow.com/questions/3787502/how-to-get-border-width-in-jquery-javascript) — Raviteja, Jan 23 '16 at 12:06
document.getElementById("ppp").style.border.. this will give you border — user0946076422, Jan 23 '16 at 12:08
You can shorten it a bit in pure JS: `var borderW = parseInt(getComputedStyle(playGard).borderLeftWidth);` — Siguza, Jan 23 '16 at 12:08
@PankajSewalia This will only give values that are actually in the `style="..."` attribute of that element, but not values applied from ` — Siguza, Jan 23 '16 at 12:10
@Moran do you want it in javascript only ?? do you use jquery ?? — Sajad Karuthedath, Jan 23 '16 at 12:10

score 2 · Accepted Answer · answered Jan 23 '16 at 14:31

Obviously, substr(0, 2) is not a good idea, because it won't work if the width is less than 10, or greater than 100.

Instead, just remove the "px" string (if it's there; it might not be if the value is 0):

+val.replace('px', '')

The leading + is to convert this to a number.

But why?

The more interesting question is why you're trying to get the border width. What were you planning to do with it? Using getComputedStyle is a bit of an anti-pattern. It often indicates that you're trying to maintain application state within CSS, which is never a good idea.

It for get the width/height without the border.i play a little game with a circle that if touch the border the circle change to red. — Moran, Jan 23 '16 at 15:59

Better way to get the border width in javascript?

1 Answers1

But why?