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

I played around with this for a little longer and the only solution I was able to come up with which would kind-off sort out the issue is similar to this:

var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;

function getLeftBorderWidth($element) {
    var leftBorderWidth = $element.css("borderLeftWidth");
    var borderWidth = 0;


    switch (leftBorderWidth) {
    case "thin":
        borderWidth = thinBorder;
        break;
    case "medium":
        borderWidth = mediumBorder;
        break;
    case "thick":
        borderWidth = thickBorder;
        break;
    default:
        borderWidth = Math.round(parseFloat(leftBorderWidth));
        break;
    }

    return borderWidth;
}

function getRightBorderWidth($element) {
    var rightBorderWidth = $element.css("borderRightWidth");
    var borderWidth = 0;


    switch (rightBorderWidth) {
    case "thin":
        borderWidth = thinBorder;
        break;
    case "medium":
        borderWidth = mediumBorder;
        break;
    case "thick":
        borderWidth = thickBorder;
        break;
    default:
        borderWidth = Math.round(parseFloat(rightBorderWidth));
        break;
    }

    return borderWidth;
}​

DEMO

Note the Math.round() and parseFloat(). Those are there because IE9 returns 0.99px for thin instead of 1px and 4.99px for thick instead of 5px.

Edit

You mentioned in the comments that IE7 has a different size for thin, medium and thick.
They seem to be off by only .5px which will be hard to deal with, seeing you most liekly need full numbers.

My suggestion would be to either simply ignore the .5px of a difference and acknowledge the most likely unnoticable imperfections when using IE7 and lower or if you are hell-bend on dealing with it to adjust the constants by that much similar to:

var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;

// Will be -1 if MSIE is not detected in the version string
var IEVersion = navigator.appVersion.indexOf("MSIE");

// Check if it was found then parse the version number. Version 7 will be 17 but you can trim that off with the below.
If(IEVersion > -1){
    IEVersion = parseInt(navigator.appVersion.split("MSIE")[1]);
}

// Now you can simply check if you are in an ancient version of IE and adjsut any default values accordingly.
If(IEVersion < 7){
    thinBorder = 0.5;
    mediumBorder = 3.5;
    thickBorder = 4.5;
}

/// rest as normal

Any of the above is by no means a copy-paste solution but merely a demonstration on a few ways one could deal with this issue. You would naturally wrap all those helpers into separate functions, plug-ins or extensions.

In your final solution you might even still need to deal with float off-sets and rounding issue.

This should be able to get you started though well enough.