在jQuery中获取边框宽度

Question

我必须在容器内动态定位弹出元素。我正在尝试获取容器的边框宽度。我发现了几个类似这样的问题：

How to get border width in jQuery/javascript

我的问题已经讨论过了，但我还没有找到任何答案。属性为粗、细、中时如何获取边框宽度？

街上流传着这样的说法，你通常可以预计薄、中和厚分别为 2px、4px 和 6px，但 CSS 规范并没有要求。

有没有人遇到过一种简单（或者如果不容易，至少是一致的）方法来获取 DOM 元素一个边缘的边框宽度？

Answer 1

如果你有：

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

可以通过jQuery获取Border-Width属性：

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

或为每一边：

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);

Answer 2

我在这个问题上玩了一段时间，我能想出的唯一可以解决问题的解决方案类似于：

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。

编辑

您在 cmets 中提到，IE7 有不同的尺寸，分为薄型、中型和厚型。
它们似乎只有 0.5 像素，这很难处理，因为你很可能需要完整的数字。

我的建议是要么简单地忽略 0.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

以上任何内容都不是复制粘贴解决方案，而只是展示了处理此问题的几种方法。您自然会将所有这些帮助程序包装到单独的函数、插件或扩展中。

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

这应该能够让你开始，虽然足够好。

Answer 3

您可以使用.innerWidth() 和.outerWidth() 来获取带和不带边框的宽度，然后从第一个减去第二个。

var someElement = $("#someId");
var outer = someElement.outerWidth();
var inner = someElement.innerWidth();

alert(outer - inner); // alerts the border width in pixels

Answer 4

获取边框宽度：

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border");
   alert(widthBorder);
   //you can split between sintax 'px'
});
</script>

Answer 5

我有一个解决方案，使用一个额外的内部容器来规避这个问题并计算容器所有侧面的真实边界。因此，如果在您的情况下可以使用这个额外的内部容器，那么 this fiddle 在 Chrome/FF/Safari/IE7/IE8 和像素边框定义以及薄/中/厚中适用于我：

var BorderWrapper = {
    getBorderWidth: function(elem) {
        elem = jQuery(elem);
        var elemInner = jQuery(elem).find('.borderElemInner');

        var posOuter = elem.position();
        var posInner = elemInner.position();

        var result = {
            top:    posInner.top - posOuter.top - parseInt(elem.css('marginTop')),
            right:  0,
            bottom: 0,
            left:   posInner.left - posOuter.left - parseInt(elem.css('marginLeft'))
        };

        result.right = jQuery(elem).outerWidth() 
                     - jQuery(elemInner).outerWidth() 
                     - result.left;

        result.bottom = jQuery(elem).outerHeight() 
                      - jQuery(elemInner).outerHeight() 
                      - result.top;

        return result;
    }
};

它使用 jQuery 的 ''.position()''、''.outerWidth()'' 和 ''.outerHeight()'' 并且还考虑了外部容器的边距。

也许有人可以在 IE9 中验证这一点？我没有它:)

Answer 6

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border","5px");
  // you can increase your pixel size according to your requirement.
});
</script>