Anton Putov Anton Putov - 5 months ago 13
CSS Question

JavaScript style property is empty

I need to calculate the width of an element's border. If I set it explicitly (via CSS), then I can access it in JavaScript by:

element.style.borderWidth


However, if only specify border style property (and not 'border-width') ->

border-style: solid


Then the
borderWidth
property is empty. Why? My approach to calculate width is as follows:

if(element.style.borderWidth == ''){
borderWidth = (offsetHeight - clientHeight)/2
}


Is there any other way to calculate border width whilst only setting
border-style
?

Answer

You can use the window.getComputedStyle for modern browsers

window.getComputedStyle(element).borderBottomWidth;

For IE pre-9 you will have to use an alternative

element.currentStyle.borderBottomWidth