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

【问题标题】：How to get border width in jQuery/javascript如何在 jQuery/javascript 中获取边框宽度
【发布时间】：2010-09-24 13:22:41
【问题描述】：

如何从

解析边框宽度

style="border: solid 1px black;"

在 jQuery/javascript 中？

$elem.css('border-width')

不这样做。

注意我需要从css解析宽度，因为元素可能是display:none

谢谢

编辑我实际上并没有使用内联样式，我只是为了简单起见才这样写，因为我没有意识到有任何行为差异。虽然它似乎对内联样式工作正常，但仍然无法从应用的 css 类中获得任何价值。

【问题讨论】：

过去，我通过使用可见性：隐藏或设置远离屏幕的绝对位置（即left: -10000px）来避免此类问题。如果你能做到这一点，一个简单的$(elem).outerWidth(false) - $(elem).innerWidth() 就能得到边框宽度。

【解决方案1】：

~~你可以只使用parseInt();来解析从Npx到N的边框宽度：~~

var width = $elem.css('borderWidth'); // 150px
var parsed = parseInt(width);         // 150

我有一个谷歌，它出现了为了获得边框的宽度，你必须提供一个明确的边框边：

var borderWidth = $elem.css("border-left-width");

这是因为每个边框都可以有不同的大小、样式和颜色。不幸的是，它似乎没有比这更简单的了。

【讨论】：

+1！提示：始终包含基数：parseInt(width, 10)。默认为十六进制。 parseInt("08") === 0 和 parseInt("08", 10) === 8
@elusive 默认为十进制。例如，parseInt(10) === 10。您要演示的是，parseInt 会将输入解释为八进制，如果它有一个前导“0”。
但请注意，IE 可以为border-whatever-width 返回非数字，而CSS spec 也允许使用“thin”、“medium”和“thick”的值。这个jsfiddle 显示IE 以border-top-width 返回“中间”。 FF和chrome显示为0px，parseInt("middle", 10)返回NaN，所以一定要在IE中测试一下。我仍在寻找如何在每种情况下获得多个像素。
re IE，如果您检测到 IE ... 将所有内容更改为 50pt 漫画 sans 并使用 setInterval 添加一个链接到体面浏览器的弹出消息
@SamWatkins 我不知道你怎么只有 423 个代表。这是我在 SO 上见过的最好的建议！

【解决方案2】：

jQuery 不允许在引用 CSS 属性时使用 -，因此请删除连字符并将以下字母大写。

$elem.css('borderWidth');

【讨论】：

不，如果样式不是内联的，它仍然无法工作。见jsfiddle.net/s7YAN/2
@Ben Everard - jQuery 确实允许连字符 - 它只是不允许的简写 CSS - 所以 left-border-width 可以，但 border-width 不行。
您的说法不正确。将小提琴更改为border-width，它仍然有效：jsfiddle.net/s7YAN/500
来自 jQuery 的文档：api.jquery.com/css——我的经验是 CSS 属性的连字符在引号内起作用。我在对象中设置多个属性时使用 camelCase，即： $(this).css({borderWidth: "2px", borderColor: "blue"}); ..因为连字符在 JS 的引号之外使用时是一个运算符，而不是字符。
这个解决方案在EDGE & FireFox 上不起作用，它会返回空字符串，你必须计算border-left-width + border-right-width 等

【解决方案3】：

var bordersOnBothSides = $("#measureMe").outerWidth() - $("#measureMe").innerWidth() );

【讨论】：

【解决方案4】：

在寻找他离开边界时完成 Generic 的回答并包括难以捉摸的关于基数的评论：

<div style="border-style:solid;border-left-width:15px;"></div>

在脚本中：

var width =parseInt($('div').css('borderLeftWidth'),10);
alert(width);

【讨论】：

【解决方案5】：

如果你有相同的元素边框宽度，或者你需要左，上边框宽度，纯js：

elem.clientLeft; //get left border of element
elem.clientTop; //get top border of element

要正确，底部边框使用jquery+css：

parseInt($(elem).css('borderLeftWidth'),10); // 10 use to get result in dec, not hex number system

【讨论】：