javascript - 使用 window.getComputedStyle 的错误 css 信息

Question

我有这个html代码

<div id="testdiv3" style="border-left: 2px solid green; border-top: 4px dashed red; border-bottom: 3px dotted blue;">testcontent</div>

对于上面的testdiv，我在console/styles中看到了这些样式

Element {
    border-left: 2px solid green;
    border-top: 4px dashed red;
    border-bottom: 3px dotted blue;
}

确实如此，因此在我必须在 jquery 中使用的数据中应该注意这一点。

在我的 jscode 中，我通过使用来捕获 css 样式

...window.getComputedStyle...

到目前为止还不错。

现在在我的测试用例中，我看到了一种我不理解的情况，因此我必须创建一种方法来阻止它。

与我在 jquery/jscode 中收到的控制台中显示的 css 样式相反

"Object { style_name: "border-bottom-color", style_value: "rgb(0, 0, 255)", style_unit: null }
​"Object { style_name: "border-left-color", style_value: "rgb(0, 128, 0)", style_unit: null }
"Object { style_name: "border-right-color", style_value: "rgb(71, 76, 80)", style_unit: null }
"Object { style_name: "border-top-color", style_value: "rgb(255, 0, 0)", style_unit: null }​

即使“bottom-top-right”没有设置为边框颜色，我还是收到了边框颜色。为什么？

我认为颜色来自 body ，在他的 css 中定义了一个颜色“color #474c50”，与“rgb(71, 76, 80)”相匹配......

那么我怎样才能防止返回一个不适用于这种 css 类型(实际上并没有被使用)的 css 样式，或者我怎样才能检查这种样式是否是“自己的”样式还是一种继承的风格？

除此之外，继承的样式将使用 active 作为页面样式。这个样式没有被使用，所以我不明白为什么会被退回。

希望有人能帮我解决这个问题(我希望我能解释一下以了解我的情况和需求)。

非常感谢。

Answer 1

请查看http://jsfiddle.net/ydrsx4jc/2/的控制台它应该解释很多。

切中要点:每个 DOM 元素都有默认属性。这些属性可以用 css 控制。

即使您将一侧的 border 属性设置为 none，html 也会将 border 设置为其“默认”值。

您可以说:如果您只使用 border 的三个边，那么您也使用了第四个边。即使您不想，即使您看不到。