我有些不清楚的地方:
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中设置样式属性一样。
谢谢。
是的,仅使用速记属性名称就可以获取计算样式。我尝试了您在jsfiddle上共享的示例,并且computeStyle.getPropertyValue(“border-color”)确实返回(265,65,0),这是预期的橙色的rgb代码。
是。在应用外部,内部和内联样式规则之后,getComputedStyle返回浏览器最终的计算样式值。.style属性仅引用元素的内联样式。
否。根据此文档,getComputedStyle返回一个CSSStyleDeclaration对象,该对象是只读的。