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

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

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

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

Answer 3

我玩了一段时间了，我能够提出的唯一解决问题的解决办法与此类似：

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具有不同的尺寸，适用于薄，中和厚它们似乎只有.5px，很难处理，看到你最需要全数。

我的建议是要么简单地忽略差异的.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 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的''。placement（）''，''。layoutWidth（）''和''。。HelloHeight（）''，并且还考虑了外容器的边距。

也许有人可以在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>

在jQuery中获取边框宽度

6 个答案:

DEMO