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

Get/Set CSS property values via Javascript: questions

提问by baptx

Some things are unclear to me:

有些事情我不清楚：

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

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

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

computedStyle.getPropertyValue("border-color");

Instead of doing:

而不是做：

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

OR

或者

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

OR

或者

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

...

...

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

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

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

This will not work.

这是行不通的。

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

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

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

I thought using the style attribute was the "old way to do", like using the inline style attribute or using object.style.property = "value" to set a style property in Javascript.

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

Thanks.

谢谢。

jsFiddle: http://jsfiddle.net/pgtFR/12/

jsFiddle：http: //jsfiddle.net/pgtFR/12/

回答by Jollyjagga

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

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

Yes, its possible to get the computed style by just using the shorthand property name. I tried the example you have shared on jsfiddleand computedStyle.getPropertyValue("border-color") does return (265,65,0) which is the rgb code for orange as expected.

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

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

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

Yes. getComputedStyle returns the final computed style value by the browser after applying external, internal and inline style rules. .style attribute only refers to the inline style for the element.

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

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

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

No. According to this document, getComputedStyle returns a CSSStyleDeclaration object which is read-only.

否。根据本文档，getComputedStyle 返回一个只读的 CSSStyleDeclaration 对象。

回答by Bergi

Isn't it possible to directly get global border color of a div if there is only one color, the same for each side

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

Yes and No. The specdescribes two methods:

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

• getPropertyCSSValue()returns a CSSValueof a single CSS Property. It does not work with shorthand properties.
• getPropertyValue()returns a DOMString, and works also for shorthand properties. But you need to be careful when there are different borders, the string will represent all of them.

• getPropertyCSSValue()返回CSSValue单个 CSS 属性的 。它不适用于速记属性。
• getPropertyValue()返回 a DOMString，也适用于速记属性。但是当有不同的边框时你需要小心，字符串将代表所有这些。

When having style properties in a CSS file, they are only accessible through the getComputedStyle method

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

No. They are also accessible through document.styleSheets(spec), and can be changed with the StyleSheetinterface.

不。它们也可以通过document.styleSheets( spec)访问，并且可以通过StyleSheetinterface进行更改。

...and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

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

Yes. The .styleproperty represents only the style declaration in the style attribute (inline styles).

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

If we want to set a style property, we have to use the style attribute of the element

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

I guess you mean a CSS property. You can also influence the computed style by setting classes on your element (or anything else that applies other styles through a stylesheet). Or you can create stylesheets dynamically, and they will be applied on the document. You can also set the styleattribute of an element, but usually you will use the CSSStyleDeclarationinterfaceexposed by the .styleproperty.

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

is it not possible using the computed style object?

不能使用计算样式对象吗？

Yes. The specsays that the returned "CSSStyleDeclarationis read-only and contains only absolute values".

是的。该规范说，返回“CSSStyleDeclaration是只读的，并且只包含绝对值”。

回答by machineghost

Ok, first off let's address this:

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

I thought using the style attribute was the "old way to do", like using the inline style attribute or using object.style.property = "value" to set a style property in Javascript.

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

The style property in JS is very different from inline styles in HTML. Inline styles in HTML are bad (IMHO) because:

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

1. They are rough on your designer; if you change blue to lightBlue, and you had a class "blue", you have one place to change (your stylesheet). If instead you had a document full of style='color:blue'... well now you get to have some fun with using the Linux sed command to do a massive find/replace ;-)

2. Classes work better performance-wise. For one thing, page load-wise, style='color:blue'is six more characters than class='blue'. When you start having multiple classes/styles, and lots of elements with all those, it (kind of) adds up. Similarly, once you enter JS land, changing classes on things is slightly faster than changing styles directly. PPK did a study on this awhile back on his quirksmode.org blog.

1. 他们对你的设计师很粗鲁；如果您将 blue 更改为 lightBlue，并且您有一个“blue”类，那么您有一个地方可以更改（您的样式表）。相反，如果您有一个充满style='color:blue'...的文档，那么现在您可以享受使用 Linux sed 命令进行大量查找/替换的乐趣；-)

2. 类在性能方面工作得更好。一方面，页面加载方式style='color:blue'比class='blue'. 当您开始拥有多个类/样式，以及所有这些的大量元素时，它（有点）加起来。同样，一旦进入 JS 领域，在事物上更改类比直接更改样式要稍微快一些。PPK 不久前在他的 quirksmode.org 博客上对此进行了研究。

But the thing is, browsers have changed a lot since PPK did that study, and changing classes at best saves a few ms vs. changing styles. Similarly, the page size will change with classes vs. styles, but with today's bandwidth the change won't be significant unless you have some truly horrible markup.

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

So, at the end of the day, classes and stylesheets are preferred primarily for reason #1; trying to maintain a consistent look, or even a not-fugly-but-inconsistent look, is basically almost impossible with inline styles. Maybeif you do a huge amount of server-side processing to generate those inline styles ... but I wouldn't recommend it.

因此，归根结底，首选类和样式表主要是因为原因#1；试图保持一致的外观，甚至是不模糊但不一致的外观，对于内联样式几乎是不可能的。 也许如果你做了大量的服务器端处理来生成那些内联样式......但我不会推荐它。

However, none of that precludes using the JS property "style" though. In fact, if you look at the source for jQuery, you'll see that it's filled with uses of .style. And jQuery isn't just the most popular library on the web; it's all (originally) John Resig code, which means it's as good, quality-wise, as JS code gets.

但是，这些都不排除使用 JS 属性“样式”。事实上，如果您查看 jQuery 的源代码，您会发现它充满了.style. jQuery 不仅仅是网络上最流行的库；这一切（最初）都是 John Resig 代码，这意味着它与 JS 代码一样好，质量上乘。

So yeah, use style. Don't feel guilty about it :-)

所以是的，使用样式。不要为此感到内疚:-)

Now, as for the rest of your questions, the short answer is that getComputedStyle is essentially the JS reference to the stylesheets, and as such you can't alter them (no to 3), they don't have inline styles (yes to 2) and I'm honestly not sure what the different browsers do in the 1) case; I wouldn't expect anything consistent, but you might get lucky.

现在，至于您的其余问题，简短的回答是 getComputedStyle 本质上是对样式表的 JS 引用，因此您无法更改它们（不是 3），它们没有内联样式（是2) 老实说，我不确定不同浏览器在 1) 情况下的作用；我不希望有任何一致的东西，但你可能会很幸运。