JavaScript style property is empty

Question

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 1

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