6

有些事情我不清楚：

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

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

computedStyle.getPropertyValue("border-color");

而不是这样做：

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

或者

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

或者

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

...

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

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

这行不通。

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

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

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

谢谢。

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

4

3 回答 3

7

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

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

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

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

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

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

于 2012-05-20T18:46:41.080 回答
5

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

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

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

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

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

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

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

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

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

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

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

于 2012-05-20T19:15:04.580 回答
1

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

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

JS 中的 style 属性与 HTML 中的内联样式有很大不同。HTML 中的内联样式不好（恕我直言），因为：

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

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

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

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

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

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

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

于 2012-05-20T18:54:45.643 回答