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

Question

我有些不清楚的地方：

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);

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

谢谢。

Answer 1

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

是的，仅使用速记属性名称就可以获取计算样式。我尝试了您在jsfiddle上共享的示例，并且computeStyle.getPropertyValue（“border-color”）确实返回（265,65,0），这是预期的橙色的rgb代码。

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

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

3）如果要设置样式属性，则必须使用元素的样式属性，是否无法使用计算出的样式对象？

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