在jQuery中获取边框宽度 [英] Getting Border Width in jQuery

问题描述

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

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

我的问题已经被讨论过，但我还没有找到任何答案。当您的财产厚，薄或中等时，您如何获得边框宽度？

街上有一句话，你通常可以期待薄，中，厚分别为2像素，4像素和6像素，但CSS规范不要求。

有没有人能够轻松（或至少一致）在DOM元素的一个边缘获取边框的宽度？

解决方案

我玩了一会儿，我能够想出的唯一解决方案是解决问题，与此类似：

  var thinBorder = 1; 
 var mediumBorder = 3; 
 var thickBorder = 5; 
 
函数getLeftBorderWidth（$ element）{
 var leftBorderWidth = $ element.css（borderLeftWidth）; 
 var borderWidth = 0; 
 
 
 switch（leftBorderWidth）{
 casethin：
 borderWidth = thinBorder; 
 break; 
 casemedium：
 borderWidth = mediumBorder; 
 break; 
 casethick：
 borderWidth = thickBorder; 
 break; 
 default：
 borderWidth = Math.round（parseFloat（leftBorderWidth））; 
 break; 
} 
 
 return borderWidth; 
} 
 
函数getRightBorderWidth（$ element）{
 var rightBorderWidth = $ element.css（borderRightWidth）; 
 var borderWidth = 0; 
 
 
 switch（rightBorderWidth）{
 casethin：
 borderWidth = thinBorder; 
 break; 
 casemedium：
 borderWidth = mediumBorder; 
 break; 
 casethick：
 borderWidth = thickBorder; 
 break; 
 default：
 borderWidth = Math.round（parseFloat（rightBorderWidth））; 
 break; 
} 
 
 return borderWidth; 
} 
  

演示

请注意 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; 
 
 //如果在版本字符串中未检测到MSIE，则为-1如果
 var IEVersion = navigator.appVersion.indexOf（MSIE）; 
 
 //检查是否找到，然后解析版本号。版本7将是17，但您可以用下面的方法来修剪。 
如果（IEVersion> -1）{
 IEVersion = parseInt（navigator.appVersion.split（MSIE）[1]）; 
} 
 
 //现在你可以简单地检查一下你是否在IE的古老版本中，并相应地调整任何默认值。 
 If（IEVersion< 7）{
 thinBorder = 0.5; 
 mediumBorder = 3.5; 
 thickBorder = 4.5; 
} 
 
 ///正常为
  

任何以上不是一个复制粘贴的解决方案，而只是一个可以处理这个问题的几种方式的演示。您将自然地将所有这些帮助器包含在单独的函数，插件或扩展名中。

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

这应该能让你开始好起来。

I have to position a popup element dynamically inside a container. I'm trying to get the border width of the container. I've found several questions like this one:

How to get border width in jQuery/javascript

My problem has been discussed but I haven't found any answers. How do you get the border width when the property is thick, thin, or medium?

There's word on the street that you can usually expect thin, medium, and thick to be 2px, 4px, and 6px respectively, but the CSS spec doesn't require that.

Has anyone run across an easy (or if not easy at least consistent) way to get the width of the border on one edge of a DOM element?

解决方案

I played around with this for a little longer and the only solution I was able to come up with which would kind-off sort out the issue is similar to this:

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

Note the Math.round() and parseFloat(). Those are there because IE9 returns 0.99px for thin instead of 1px and 4.99px for thick instead of 5px.

Edit

You mentioned in the comments that IE7 has a different size for thin, medium and thick.
They seem to be off by only .5px which will be hard to deal with, seeing you most liekly need full numbers.

My suggestion would be to either simply ignore the .5px of a difference and acknowledge the most likely unnoticable imperfections when using IE7 and lower or if you are hell-bend on dealing with it to adjust the constants by that much similar to:

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

Any of the above is by no means a copy-paste solution but merely a demonstration on a few ways one could deal with this issue. You would naturally wrap all those helpers into separate functions, plug-ins or extensions.

In your final solution you might even still need to deal with float off-sets and rounding issue.

This should be able to get you started though well enough.

这篇关于在jQuery中获取边框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！