CSS 样式声明对象(CSSStyleDeclaration)

CSS 样式声明对象(CSSStyleDeclaration)是表示CSS样式规则的对象，它包含了要应用到HTML元素的样式属性和它们的值。CSSStyleDeclaration 接口提供了一系列属性和方法，用于操作样式属性。

属性

在 CSSStyleDeclaration 接口中，有许多属性可以用来获取或设置样式规则中的各种属性。

length

该属性返回样式声明对象中的属性数量。

let style = window.getComputedStyle(document.querySelector(".example"))
console.log(style.length)

cssText

该属性返回或设置样式声明对象的文本内容。

let style = document.querySelector(".example").style;
style.cssText = "color: red; font-size: 20px;"
console.log(style.cssText)

parentRule

该属性返回包含此样式声明对象的CSS规则。

let style = document.querySelector(".example").style;
console.log(style.parentRule)

getPropertyPriority()

该方法返回样式属性值的重要性。

let style = document.querySelector(".example").style;
console.log(style.getPropertyPriority("font-size")) // ""

getPropertyValue()

该方法返回由参数指定的CSS属性的属性值。

let style = document.querySelector(".example").style;
console.log(style.getPropertyValue("font-size")) // "18px"

item()

该方法返回给定索引处的属性名称。

let style = document.querySelector(".example").style;
console.log(style.item(0)) // "font-size"

removeProperty()

该方法从样式声明中删除指定的CSS属性。

let style = document.querySelector(".example").style;
style.removeProperty("font-size")

setProperty()

该方法以优先级字符串，设置指定样式属性的属性值。

let style = document.querySelector(".example").style;
style.setProperty("font-size", "24px", "important")

方法

CSSStyleDeclaration 接口提供了许多方法来操作样式属性。

getPropertyCSSValue()

该方法返回给定属性的 CSS 值对象。

let style = window.getComputedStyle(document.querySelector(".example"))
let fontSize = style.getPropertyCSSValue("font-size")
console.log(fontSize)

getPropertyShorthand()

该方法返回给定属性的缩写属性名称。

let style = window.getComputedStyle(document.querySelector(".example"))
console.log(style.getPropertyShorthand("margin-bottom")) // "margin"

isPropertyImplicit()

该方法返回给定属性是否是隐式地设置的。

let style = window.getComputedStyle(document.querySelector(".example"))
console.log(style.isPropertyImplicit("display")) // false

item()

该方法返回给定索引处的属性名称。

let style = document.querySelector(".example").style;
console.log(style.item(0)) // "font-size"

removeProperty()

该方法从样式声明中删除指定的CSS属性。

let style = document.querySelector(".example").style;
style.removeProperty("font-size")

setProperty()

该方法以优先级字符串，设置指定样式属性的属性值。

let style = document.querySelector(".example").style;
style.setProperty("font-size", "24px", "important")

总结

CSSStyleDeclaration 接口是样式规则的一个表示，包含各种样式属性及其值。通过CSSStyleDeclaration，可以轻松访问和操作样式规则中的属性。在实际开发过程中，合理有效地使用CSSStyleDeclaration，可以使开发者更加高效地进行前端开发。

Console 对象 DOM HTMLCollection