如何在 Javascript 中使用 ComputedStyle 获取边框宽度？

Question

下面的命令

window.getComputedStyle(box).getPropertyValue("border")

回来了

"0.994318px solid rgb(255, 0, 0)"

如何使用 ComputerStyle 获取边框宽度？有没有办法用另一个替换 "border" 参数，这样在上述情况下，输出

0.994318px

Answer 1

类似于Why won't .getPropertyValue() return a value for the "borderRadius" property?

指定您想要的 CSS 属性，因此 'border-width'

编辑：正如@HereticMonkey 所指出的（我在链接 post 中遗漏了这一点），在 Firefox 中，您需要对属性进行细化。所以在 border-width 的情况下，你需要得到准确的边界，例如边框底部宽度。

Answer 2

从class得到'border-top-width'：

<style>.mystyle{border:8px solid grey;padding:10px;}</style>

<div id="xyz" class="mystyle">just testing</div>

var mydiv = document.getElementById('xyz');

var borderTop = parseInt(getComputedStyle(mydiv).getPropertyValue("border-top-width").replace('px',''));

console.log('borderTop:'+borderTop);// -> 8

How to get border-width using ComputedStyle in Javascript?