Getting Border Width in jQuery

Question

I have to position a popup element dynamically inside a container. I'm trying to get the border width of the container. I've found several questions like this one:

How to get border width in jQuery/javascript

My problem has been discussed but I haven't found any answers. How do you get the border width when the property is thick, thin, or medium?

There's word on the street that you can usually expect thin, medium, and thick to be 2px, 4px, and 6px respectively, but the CSS spec doesn't require that.

Has anyone run across an easy (or if not easy at least consistent) way to get the width of the border on one edge of a DOM element?

Answer 1

usualy if you have:

<div id="container">myContainer</div>

you can get the Border-Width attribute by jQuery:

var borderWidth = $('#container').css('borderWidth');
alert(borderWidth);

or for each side by:

var left = $('#container').css('borderLeftWidth');
var right = $('#container').css('borderRightWidth');
var top = $('#container').css('borderTopWidth');
var bottom = $('#container').css('borderBottomWidth');

alert(left+" "+right+" "+top+" "+bottom);