在jQuery中获取边框宽度

Question

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

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

我的问题已经讨论过,但我没有找到任何答案.如果属性是厚,薄或中等,您如何获得边框宽度？

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

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

Answer 1

我对此进行了长时间的研究，我能想出的唯一可以解决问题的解决方案与此类似：

\n\n

var thinBorder = 1;\nvar mediumBorder = 3;\nvar thickBorder = 5;\n\nfunction getLeftBorderWidth($element) {\n    var leftBorderWidth = $element.css("borderLeftWidth");\n    var borderWidth = 0;\n\n\n    switch (leftBorderWidth) {\n    case "thin":\n        borderWidth = thinBorder;\n        break;\n    case "medium":\n        borderWidth = mediumBorder;\n        break;\n    case "thick":\n        borderWidth = thickBorder;\n        break;\n    default:\n        borderWidth = Math.round(parseFloat(leftBorderWidth));\n        break;\n    }\n\n    return borderWidth;\n}\n\nfunction getRightBorderWidth($element) {\n    var rightBorderWidth = $element.css("borderRightWidth");\n    var borderWidth = 0;\n\n\n    switch (rightBorderWidth) {\n    case "thin":\n        borderWidth = thinBorder;\n        break;\n    case "medium":\n        borderWidth = mediumBorder;\n        break;\n    case "thick":\n        borderWidth = thickBorder;\n        break;\n    default:\n        borderWidth = Math.round(parseFloat(rightBorderWidth));\n        break;\n    }\n\n    return borderWidth;\n}\xe2\x80\x8b\n

\n\n

演示版

\n\n

请注意Math.round()和parseFloat()。这些之所以存在，是因为 IE9 返回0.99pxfor 而thin不是1px和4.99pxforthick而不是5px。

\n\n

编辑

\n\n

您在评论中提到IE7有不同的细、中、粗尺寸。
\n它们似乎仅相差 0.5 像素，这将很难处理，因为您最有可能需要完整的数字。

\n\n

我的建议是，要么简单地忽略 0.5px 的差异，并承认使用 IE7 及更低版本时最可能不明显的缺陷，或者如果您极力处理它，则将常量调整为类似于：

\n\n

var thinBorder = 1;\nvar mediumBorder = 3;\nvar thickBorder = 5;\n\n// Will be -1 if MSIE is not detected in the version string\nvar IEVersion = navigator.appVersion.indexOf("MSIE");\n\n// Check if it was found then parse the version number. Version 7 will be 17 but you can trim that off with the below.\nIf(IEVersion > -1){\n    IEVersion = parseInt(navigator.appVersion.split("MSIE")[1]);\n}\n\n// Now you can simply check if you are in an ancient version of IE and adjsut any default values accordingly.\nIf(IEVersion < 7){\n    thinBorder = 0.5;\n    mediumBorder = 3.5;\n    thickBorder = 4.5;\n}\n\n/// rest as normal\n

\n\n

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

\n\n

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

\n\n

这应该能够帮助您入门，尽管已经足够好了。

\n