14

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

如何在 jQuery/javascript 中获取边框宽度

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

街上流传着这样的说法，您通常可以期望薄、中和厚分别为 2px、4px 和 6px，但 CSS 规范并不要求这样做。

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

4

6 回答 6

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);
于 2012-11-28T14:28:31.493 回答
0

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

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

alert(outer - inner); // alerts the border width in pixels
于 2012-11-28T14:26:32.257 回答
0

我玩了一会儿这个问题，我能想出的唯一解决方案可以解决这个问题：

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;
}​

演示

注意Math.round()和parseFloat()。这些是因为 IE9 返回0.99pxforthin而不是1px和4.99pxforthick而不是5px.

编辑

您在评论中提到，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

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

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

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

于 2012-11-29T00:03:58.290 回答
0

获取边框宽度：

<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border");
   alert(widthBorder);
   //you can split between sintax 'px'
});
</script>
于 2012-11-30T07:22:24.647 回答
0

我有一个解决方案，使用额外的内部容器来规避问题并计算容器所有侧面的真实边界。因此，如果在您的情况下可以使用这个额外的内部容器，那么这个小提琴在 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 中验证这一点？我没有它:)

于 2012-12-02T11:26:10.470 回答
0 
<script type="text/javascript">
$(document).ready(function(){
   var widthBorder = $("div").css("border","5px");
  // you can increase your pixel size according to your requirement.
});
</script>
于 2012-12-03T06:54:27.277 回答