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,可以使开发者更加高效地进行前端开发。