在jQuery中获取边框宽度

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

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

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

在街上有一句话，你通常可以期望薄，中，厚分别是2px，4px和6px，但CSS规范并不需要。

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

Answer 1

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

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为thin不是1px返回0.99px而thick为4.99px而不是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 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

通常，如果你有：

 
myContainer 

你可以通过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 4

获取边框宽度：

Answer 5

我有一个解决方案，使用额外的内部容器来规避问题并计算容器所有边的真实边框。 因此，如果在您的情况下可以使用这个额外的内部容器，那么这个小提琴在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（）”，”。layoutWidth（）”和”。HelloHeight（）”，并且还考虑了外容器的边距。

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

Answer 6