通过Javascript获取/设置CSS属性值：问题

有些事情我不清楚：

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

1） 如果只有一种颜色，且每边颜色相同，是否可以直接获取div的全局边框颜色：

computedStyle.getPropertyValue("border-color");

而不是做：

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

或

或

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

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

这是行不通的

3） 如果我们想设置一个样式属性，我们必须使用元素的样式属性，难道不能使用计算样式对象吗

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

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

谢谢

jsFiddle：

1） 如果只有一种颜色，且每边颜色相同，是否可以直接获取div的全局边框颜色：

computedStyle.getPropertyValue("border-color");

是的，只需使用速记属性名就可以获得计算样式。我尝试了您在和computedStyle上共享的示例。getPropertyValue（“边框颜色”）确实返回（265,65,0），这是橙色的rgb代码

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

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

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

3） 如果我们想设置一个样式属性，我们必须使用元素的样式属性，难道不能使用计算样式对象吗

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

---

否。根据这一点，getComputedStyle返回一个CSSStyleDeclaration对象，该对象是只读的。

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

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

JS中的style属性与HTML中的内联样式非常不同。HTML中的内联样式不好（IMHO），因为：

他们对你的设计师很粗暴；如果您将blue更改为lightBlue，并且您有一个类“blue”，那么您只有一个地方可以更改（您的样式表）。如果您的文档中充满了

style='color:blue'

。。。现在，您可以通过使用Linux sed命令进行大规模查找/替换来获得一些乐趣；-）

从表现上看，课堂效果更好。首先，在页面加载方面，

style='color:blue'

比

class='blue'

多6个字符。当你开始拥有多个类/样式，以及大量的元素时，它（某种程度上）会累积起来。类似地，一旦您进入JS land，更改事物的类要比直接更改样式快一些。PPK不久前在他的quirksmode.org博客上对此进行了研究

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

因此，归根结底，类和样式表之所以成为首选，主要是因为#1；对于内联样式，试图保持一致的外观，或者甚至是一个不富于生气但不一致的外观，基本上是不可能的如果您进行大量服务器端处理以生成这些内联样式，则可能。。。但我不推荐

然而，所有这些都不排除使用JS属性“style”。事实上，如果您查看jQuery的源代码，您将看到它充满了

.style

的用法。jQuery不仅仅是web上最流行的库；这都是（最初）John Resig代码，这意味着它和JS代码一样好，质量也一样好

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

现在，对于你剩下的问题，简短的回答是getComputedStyle本质上是对样式表的JS引用，因此你不能修改它们（对3来说是否定的），它们没有内联样式（对2来说是肯定的），我真的不知道不同的浏览器在这种情况下会做什么；我不指望有什么始终如一的，但你可能会走运

如果只有一种颜色，每边都相同，那么直接获取div的全局边框颜色难道不可能吗

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

• getPropertyCSValue（）

  返回单个CSS属性的

  CSSValue

  。它不适用于速记属性

• getPropertyValue（）

  返回一个

  DOMString

  ，也适用于速记属性。但是当有不同的边界时，需要小心，字符串将代表所有边界

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

不可以。它们也可以通过（）访问，并且可以通过进行更改

…而不是通过像内联定义的样式属性那样的样式属性，通过div中的样式属性，我说得对吗

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

对。

.style

属性仅表示样式属性（内联样式）中的样式声明

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

我猜你指的是CSS属性。还可以通过在元素（或通过样式表应用其他样式的任何其他对象）上设置类来影响计算样式。 或者您可以动态创建样式表，它们将应用于文档。还可以设置元素的

样式

属性，但通常使用