jquery - 在jQuery中获取边框宽度

我必须在容器内动态放置一个弹出元素。我正在尝试获取容器的边框宽度。我发现了这样的几个问题:

How to get border width in jQuery/javascript

我的问题已经讨论过，但没有找到任何答案。当属性为thick，thin或medium时，如何获得边框宽度？

在大街上有个词，您通常可以期望Thin，Medium和Thick分别为2px，4px和6px，但是CSS规范并不需要。

有没有人碰过一种简单的(或者至少很难一致的)方法来获得DOM元素边缘上的边框宽度？

最佳答案

我玩了一段时间，我唯一能想到的解决问题的办法就是这样:

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

注意Math.round()和parseFloat()。在那里是因为IE9返回0.99px而不是thin的1px和4.99px而不是thick的5px。

编辑

您在评论中提到IE7的薄，中，厚大小不同。
他们似乎只差了0.5像素，这很难处理，因为您最有可能需要完整数字。

我的建议是要么简单地忽略差异的.5px并确认使用IE7及更低版本时最可能出现的明显缺陷，或者如果您不愿意处理该常数以将常量调整为类似以下方式:

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

上面的任何方法绝不是复制粘贴解决方案，而只是一种可以解决此问题的几种方式的演示。您自然会将所有这些帮助程序包装到单独的功能，插件或扩展中。

在您的最终解决方案中，您甚至可能还需要处理浮点偏移和舍入问题。

这应该能够使您入门足够好。