Question

有些事情我不清楚：

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);

1）如果只有一种颜色，则不可能直接获得div的全局边框颜色，每边都相同：

computedStyle.getPropertyValue("border-color");

而不是：

computedStyle.getPropertyValue("border-left-color");

OR

computedStyle.getPropertyValue("border-right-color");

OR

computedStyle.getPropertyValue("border-top-color");

...

2）当在CSS文件中具有样式属性时，它们只能通过getComputedStyle方法访问，而不能通过样式属性（如内联定义的样式属性）访问，通过div中的样式属性，我是对的吗？

myDiv.style.getPropertyValue("border-left-color");

这不起作用。

3）如果我们要设置样式属性，我们必须使用元素的style属性，是不是可以使用计算出的样式对象？

computedStyle.setProperty("border-color", "yellowgreen", null);

我认为使用style属性是“旧方法”，比如使用内联样式属性或使用object.style.property =“value”在Javascript中设置样式属性。

感谢。

Answer 1

1）如果只有一种颜色，则不可能直接获得div的全局边框颜色，每边都相同：

是的，可以通过使用简写属性名来获取计算样式。我尝试了你在jsfiddle上共享的示例，并且computedStyle.getPropertyValue（“border-color”）确实返回（265,65,0），这是预期的橙色rgb代码。

2）当在CSS文件中具有样式属性时，它们只能通过getComputedStyle方法访问，而不能通过样式属性（如内联定义的样式属性）访问，通过div中的样式属性，我是对的吗？

是。在应用外部，内部和内联样式规则后，getComputedStyle返回浏览器的最终计算样式值。 .style属性仅指元素的内联样式。

3）如果我们要设置样式属性，我们必须使用元素的style属性，是不是可以使用计算出的样式对象？

没有。根据这个document，getComputedStyle返回一个只读的CSSStyleDeclaration对象。

Answer 2

如果只有一种颜色，则不可能直接获得div的全局边框颜色，每边都相同

是和否。spec描述了两种方法：

在CSS文件中具有样式属性时，只能通过getComputedStyle方法
访问它们

没有。它们也可以通过document.styleSheets（spec）访问，并可以使用StyleSheet interface进行更改。

...而不是通过样式属性，如内联定义的样式属性，通过div中的样式属性，我是对的吗？

是。 .style属性仅表示样式属性中的样式声明（内联样式）。

如果我们要设置样式属性，我们必须使用元素的样式属性

我猜你的意思是CSS属性。您还可以通过在元素上设置类（或通过样式表应用其他样式的任何其他内容）来影响计算样式。或者您可以动态创建样式表，它们将应用于文档。您还可以设置元素的style属性，但通常会使用.style属性公开的CSSStyleDeclaration interface。

是不是可以使用计算出的样式对象？

是。 spec表示返回的“ CSSStyleDeclaration是只读的，只包含绝对值”。

Answer 3

好的，首先让我们解决这个问题：

我认为使用style属性是“老方法”，就像使用内联样式属性或使用object.style.property = “value”在Javascript中设置样式属性。

JS中的style属性与HTML中的内联样式非常不同。 HTML中的内联样式很糟糕（恕我直言），因为：

他们对你的设计师很粗暴;如果你将蓝色变为浅蓝色，并且你有一个“蓝色”类，你有一个地方可以改变（你的样式表）。如果你有一个满是style='color:blue'的文件......那么现在你可以使用Linux sed命令进行大量的查找/替换; - ）
课程的表现更好。首先，页面加载方式style='color:blue'比class='blue'多六个字符。当你开始拥有多个类/样式，以及包含所有这些的许多元素时，它（种类）会加起来。同样，一旦你进入JS领域，改变事物的类比直接改变样式要快一些。 PPK在他的quirksmode.org博客上做了一段时间的研究。

但问题是，自从PPK完成这项研究以来，浏览器已经发生了很大的变化，而改变类最多可以节省几毫秒而不是改变风格。同样，页面大小会随着类和样式的变化而变化，但是对于今天的带宽，除非你有一些真正可怕的标记，否则变化不会很大。

因此，在一天结束时，首选类和样式表主要是出于理由＃1;试图保持一致的外观，甚至是一种不显眼但不一致的外观，对于内联样式来说基本上是不可能的。也许如果你做了大量的服务器端处理来生成这些内联样式......但我不推荐它。

但是，这些都不排除使用JS属性“style”。事实上，如果你看一下jQuery的源代码，你会发现它充满了.style的用法。而jQuery不仅仅是网上最受欢迎的图书馆;它是所有（最初）John Resig代码，这意味着它与JS代码一样好，质量方面。

所以是的，使用风格。不要为此感到内疚： - ）

现在，至于你的其他问题，简短的回答是getComputedStyle本质上是对样式表的JS引用，因此你不能改变它们（从3到3），它们没有内联样式（是的2）我真的不确定不同的浏览器在1）的情况下做了什么;我不希望任何事情一致，但你可能会很幸运。