通过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)如果我们要设置样式属性,我们必须使用元素的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属性,是不是可以使用计算出的样式对象？

否.根据此文档,getComputedStyle返回一个只读的CSSStyleDeclaration对象.

Answer 2

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

是和否.规范描述了两种方法:

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

不可以.它们也可以通过document.styleSheets(规范)访问,并且可以通过StyleSheet界面进行更改.

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

是.该.style属性仅表示样式属性(内联样式)中的样式声明.

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

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

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

是.该规范指出,返回" CSSStyleDeclaration是只读的,并且只包含绝对值 ".