使用纯JavaScript无法获得元素的边框底部宽度

Question

我有以下简单代码：

var element = document.getElementById('image_1');
style = window.getComputedStyle(element);
borderBottom = style.getPropertyValue('border-bottom');
console.log(borderBottom);

#image_1 {
  position: absolute;
  top: 340px;
  border-bottom: 1px;
}

<div id="image_1">hello</div>

这是我的JsFiddle。

有什么主意吗？

Answer 1

如果您修复了CSS，它就可以正常工作。您声明底部宽度，但没有声明border属性的其他必需值，因此示例中实际上不存在边框。

检查一下：

#image_1 {
   position: absolute;
   top: 340px;
   border:1px solid black;
}

JsFiddle

Answer 2

您的CSS无效。 border-bottom的格式应为width style color。

如果将CSS更改为border-bottom: 1px solid black;，则可以获取宽度，并且样式也将可见。