在jQuery中获取边框宽度

Posted 2023-05-09

【中文标题】在jQuery中获取边框宽度

【英文标题】：Getting Border Width in jQuery

【发布时间】：2012-11-16 10:23:13

【问题描述】：

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

How to get border width in jQuery/javascript

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

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

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

【问题讨论】：

街上有关于预期结果的消息，因为没有定义标准。每个浏览器都以自己的方式实现它。

您的问题是关于厚、薄和中等的吗？这些很少使用，我将它们称为一个好的标准可以避免的边缘情况。

看起来加藤就是这样。从概念上讲，我从来没有真正关心过它们，但我不喜欢在开始一个插件时说，“好吧，不要使用愚蠢的 CSS，你不会有问题。”嗯，我想，但我不能。 :)

是否有理由为什么选择边框每一边的宽度对您不起作用？ jsfiddle.net/CadEX

@Rory，是的。该插件允许您为弹出窗口指定一个容器，以便您可以相对定位容器。弹出窗口需要根据偏移量和边框（可能还有边距，但我们还没有越过那座桥）来补偿相对位置。即使我可以指望元素两侧的边框相同，但在 IE7 中， ($element.outerWidth() - $element.innerWidth()) === 0 when border-width: thick|thin|medium .

【参考方案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);

【讨论】：

这不是他要找的吗？

他在寻找边框宽度，不是吗？

这是一个完整的答案，为什么要投反对票？

@Munchies：OP 链接了一个问题，该问题已经回答了这个答案的答案，但不是所问的。据我所知，IE 返回NaN 值，例如thick 或medium。 OP 正在询问如何在这些情况下获取实际数值。这个答案没有解决这个问题。

根据我在问题的 cmets 中链接的小提琴，Chrome/Firefox 以 1px 为 thin，3px 为 medium 和 5px 为 thick .链接方便：jsfiddle.net/CMbPN

【参考方案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

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

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

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

【讨论】：

@D.Patrick：你当然可以对borderTopWidth 和borderBottomWidth 应用相同的逻辑。

你注意到我为回应你的小提琴评论而制作的小提琴了吗？在任何情况下，问题是 IE jsfiddle.net/tncbbthositg/VM4ha

呃。当我想要换行并发布评论时，我总是按 Enter 键。无论如何，如果您在脚本中考虑到这一点（并且最好添加一些关于没有更好方法的事实），那么我会接受您的回答。我不能接受你的回答，因为据我所知它对于 IE7 是不正确的。

另外，为了更简洁，你也可以有一个函数，只需要一个字符串参数来指定你想要获取宽度的边框（这样你就不会需要4个功能）。即，getBorderWidth($element,border)。更好的是，将它添加到 jQuery.fn，这样你就可以说，$element.getBorderWidth("right")，但我没那么挑剔。我希望它能够解决最初的问题，即“有没有更简单的方法”并且还与当前的浏览器兼容。

@D.Patrick：关于尺寸差异，我直到现在才注意到。这只发生在 IE7 中，我假设

【参考方案3】：

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

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

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

【讨论】：

这会给你两个边框的宽度，如果一侧比另一侧厚怎么办？

rcdmk，我确实从这条路开始，但罗里是对的。 . .我需要考虑不同宽度的边框。这就是为什么我在问题中特别提到“在一个边缘”。另一个问题是，显然在 IE7 中（不幸的是我必须支持 IE7），如果border-width 属性是非数字的，则outerWidth 不包括边框宽度。

@RoryMcCrossan 您的观点是有效的，但这仍然很有帮助。这是一个适用于许多人的解决方案；这取决于宽度将用于什么，没有指定。

好收获。但获得每个边界所需度量的唯一方法是使用.css() 方法，但这属于他已经谈到的有问题的“非标准世界”。

@rcdmk：据我所知，IE 返回 NaN 值，例如 thick 或 medium。我相信 OP 正在询问如何在这些情况下获取实际数值。这个答案（尽管对其他问题很有用）并没有解决这个问题，因为 jQuery outerWidth()/innerWidth() 忽略了 NaN 值。

【参考方案4】：

获取边框宽度：

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

【参考方案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 中验证这一点？我没有它:)

【参考方案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>