Question

我有这个html代码

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

对于上面的testdiv，我在控制台/样式中看到了这些样式

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

就是这样，因此应该在我必须在jquery中使用的数据中注意到它。

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

...window.getComputedStyle...

到目前为止一切都很好。

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

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

"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”设置为边框颜色，我也收到了边框颜色。为什么？

我认为颜色是来自身体的，在他的css中是一种定义为“ color＃474c50”的颜色，与“ rgb（71，76，80）”相匹配...

因此，我如何才能防止返回不属于该css种类的css样式（该样式并未真正使用），或者如何检查该样式是否为“自己的”样式还是一种继承的样式？

此外，继承的样式将使用active作为页面样式。此样式未使用，所以我不明白为什么会返回它。

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

非常感谢。

Answer 1

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

要指出这一点：每个DOM元素都有默认属性。这些属性可以通过CSS控制。

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

您可能会说：如果仅使用border的三个面，那么您也将使用第四个面。即使您不想，甚至看不到它。

Answer 2

计算值的确是此值，因为所有CSS规则均具有默认值_{[需要引用]}，如果未设置，则由浏览器自行设置（也称为用户代理规则< / em>），并且border-[]-color规则之一是currentColor，该规则在进行序列化时必须返回元素的活动color规则的序列化。

如果您的元素仅从那里继承其color，则它确实可以成为主体之一。

但是，如果将其color设置为其他值，则将使用此值。

对于您的情况，也许您宁愿改为检查width和style的值。

const computed = getComputedStyle(el); console.log(computed['border-right-color']); // rgb(255, 165, 0) console.log(computed['border-right-style']); // none console.log(computed['border-right-width']); // 0px

#el { border-left: 2px solid green; border-top: 4px dashed red; border-bottom: 3px dotted blue; /* defaults: */ /* border-right: 0px none currentColor; */ color: rgb(255, 165, 0); }

<div id="el"></div>

Answer 3

请注意getComputedStyle（el）返回值以px为单位

如果要更改其他尺寸，例如pt，mm，in，％，em

将您的价值转换为

pt = 3/4 * px

em = pt / 12

％= pt * 100/12

通过使用window.getComputedStyle错误的CSS信息

3 个答案: