Question

我遇到了一种情况，希望能够使用Javascript判断某个元素是否有底边框。

我认为这就像在元素上使用getComputedStyle一样简单，并且正在寻找＆＃34; borderBottom＆＃34;在生成的样式表对象中。

嗯，如果你关心跨浏览器兼容性，它似乎有点复杂。我不是在谈论支持IE 6,7甚至8等古老的东西（它们甚至没有getComputedStyle） - 我正在谈论支持相对现代 browsers。

似乎不同的浏览器在这方面做了不同的事情。

让我们采用一个非常简单的样式表：

.foo,
.bar {
    border: 3px solid black;
}

.foo {
    border-top: 0;
}

假设我想要计算＆＃34; border-bottom＆＃34;这里的价值。即使没有设置实际的border-bottom属性，也会通过border属性计算它。

所以，在Chrome版本37上（不是最新版本，但很漂亮＆＃34;现代＆＃34;），如果我在某个使用类getComputedStyle的元素上调用bar，我会得到：{ {1}}正如所料。

然而，在Firefox（第28版 - 再次不是最新版本，但仍然很漂亮＆＃34;现代＆＃34;）我只是得到3px solid rgb(0, 0, 0)样式的空字符串。

所以，我编写了一个小脚本来迭代计算出的样式表，看看Chrome和Firefox实际生成了什么：

"borderBottom"

两个浏览器都输出一个巨大的计算样式列表。果然，使用Chrome我看到了：

var style = getComputedStyle(document.getElementById("example"));
for (var key in style) console.log("STYLE: " + key + " " + style[key]);

但Mozilla并没有提供类似的东西。它提供了样式规则的混合，以及本机代码内部函数，如：

STYLE: borderBottom 3px solid rgb(0, 0, 0)

我将这两个浏览器的输出转储到公共jsfiddle上（不是要执行，它只是我转储到那里的纯文本输出）：

The output for Firefox
的 The output for Chrome

正如您所看到的，他们非常不同。

And here's a fiddle显示我用来生成这些列表的实际代码：

（请注意，输出显示在浏览器的控制台中，在大多数浏览器中按 F12 按钮查看开发者控制台。）

那么，有没有一些已知的跨浏览器策略呢？如何以适用于所有现代浏览器的方式查找特定属性（如"STYLE: item function item() { [native code] }"）的计算样式？这是甚至W3C标准化的东西吗？

或者，如果没有图书馆的话，这件事情有点过于复杂吗？

Answer 1

问题可能是border是border-width，border-style，border-color的速记属性。 border-width是border-*-width等的缩写。

然后，设置border设置border-bottom-*属性，但不设置border-bottom。因此，您在Firefox上获得空字符串。

但是，以下内容可行：

getComputedStyle(element).borderBottomWidth