小编典典

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

css

我有些不清楚的地方:

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中设置样式属性一样。

谢谢。


阅读 355

收藏
2020-05-16

共1个答案

小编典典

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

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

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

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

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

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

2020-05-16