526互联

js_doucment.styleSheets获取StyleSheetList接口

发布时间 2023-10-22 23:30:05作者: Steperouge

  • 通过document.styleSheets可以获取到一个StyleSheetList接口

    • const aStyleList = document.styleSheets
console.log(aStyleList.constructor.name) // StyleSheetList
console.log(Object.prototype.toString.call(aStyleList)) // [object StyleSheetList]
console.log(Array.isArray(aStyleList)) // false

    • StyleSheetList接口表示CSSTyleSheet对象的列表。Document.styleSheets可以返回此对象的实例。 它是一个类似数组的对象，但不能使用array方法进行迭代。然而，它可以在其索引上的标准for循环中迭代，或者转换为数组。

  • 类似数组, 可以使用.length来获取样式表的数据, 每一个数据对应一个style标签内写入或者link标签所引入的样式对象( CSSStyleSheet对象 )

    • console.log(aStyleList.length) // 3

    • Array.prototype.forEach.call(aStyleList, styleItem => {
  console.log(styleItem)
})
// CSSStyleSheet
// CSSStyleSheet
// CSSStyleSheet

  • 类似数组, 可以使用[index]来直接获取对应的 ,.item([index])来获取对应的CSSStyleSheet对象

    • console.log(aStyleList.item(0) === aStyleList[0]) // true

CSSStyleSheet对象

  • StyleSheetList类数组中的每一个组成项都是CSSStyleSheet对象

    • Array.prototype.forEach.call(aStyleList, styleItem => {
  console.log(styleItem.constructor.name) // CSSStyleSheet
  console.log(Object.prototype.toString.call(styleItem)) // [object CSSStyleSheet]
  console.log(Object.prototype.isPrototypeOf(styleItem)) // true
})

  • 属性组成

    • const oStyle1 = aStyleList.item(0)
console.log(Object.keys(oStyle1)) // [] ,表示不存在可枚举的私有属性
console.log(Object.getOwnPropertyNames(oStyle1)) // [] ,表示不存在可枚举或不可枚举的私有属性

    • let arr = []
for (const prop in oStyle1) {
  arr.push(prop)
}
console.log(arr) // ['ownerRule', 'cssRules', 'rules', 'addRule', 'deleteRule', 'insertRule', 'removeRule', 'replace', 'replaceSync', 'type', 'href', 'ownerNode', 'parentStyleSheet', 'title', 'media', 'disabled']

CSSStyleSheet对象的部分属性与方法说明

for (const prop in oStyle1) {
  // arr.push(prop)
  console.group(prop)
  try {
    console.log(oStyle1[prop])
  } catch (err) {
    console.log(err)
  }
  console.groupEnd(prop)
}

  • ownerRule

    • 如果使用@import规则将此样式表导入到文档中，ownerRule属性将返回相应的CSSImportRule；否则，此属性的值为null。

  • cssRules

    • CSSRuleList表示只读CSSRule对象的有序集合。 虽然CSSRuleList对象是只读的，不能直接修改，但它被视为活动对象，因为内容可能会随着时间的推移而更改。 要编辑CSSRule对象返回的底层规则，请使用CSSStyleSheet.insertRule（）和CSSStyleSheet.deleteRule（)。 接口没有构造函数。CSSRuleList的实例由CSSStyleSheet.cssRules和CSSKeyframesRule.cssRules返回。

    • const oStyle1 = aStyleList.item(0)
console.log(oStyle1.cssRules.constructor.name) // CSSRuleList
console.log(Array.isArray(oStyle1.cssRules)) // false
console.log(oStyle1.cssRules.item(0)===oStyle1.cssRules[0]) // true
console.log(Object.prototype.toString.call(oStyle1.cssRules)) // [object CSSRuleList]
console.log(Object.keys(oStyle1.cssRules)) // ['0', '1', '2', '3', '4', '5', '6']
console.log(Object.getOwnPropertyNames(oStyle1.cssRules)) // ['0', '1', '2', '3', '4', '5', '6']
console.log(oStyle1.cssRules[0].constructor.name) // CSSStyleRule

    • 如上代码所示, cssRules返回一个类数组CSSRuleList, 通过.item([index])或者[index]来获取组成项, 每项都是一个 CSSStyleRule对象

  • href

    • 如果是<link>标签引入的话那么就是link的href属性的值, style标签返回null

cssRules属性

const aStyleList = document.styleSheets
const oStyle1 = aStyleList.item(1)
const oCssRules = oStyle1.cssRules[0]
console.log(Object.keys(oCssRules)) // []
console.log(Object.getOwnPropertyNames(oCssRules)) // []
console.log(oCssRules.constructor.name) // CSSStyleRule
let arr = []
for (const prop in oCssRules) {
  arr.push(prop)
  console.group(prop)
  console.log(oCssRules[prop])
  console.groupEnd(prop)
}
console.log(arr) // ['selectorText', 'style', 'styleMap', 'cssRules', 'deleteRule', 'insertRule', 'type', 'cssText', 'parentRule', 'parentStyleSheet', 'STYLE_RULE', 'CHARSET_RULE', 'IMPORT_RULE', 'MEDIA_RULE', 'FONT_FACE_RULE', 'PAGE_RULE', 'NAMESPACE_RULE', 'KEYFRAMES_RULE', 'KEYFRAME_RULE', 'COUNTER_STYLE_RULE', 'FONT_FEATURE_VALUES_RULE', 'SUPPORTS_RULE']

  • selectorText

    • 返回选择器的字符串, 比如.test

  • style

    • 返回一个CSSStyleDeclaration 对象, 其属性包含大量css属性名, 可以通过.语法获取到对设置的对应的属性值; 如果该属性没有被设置, 那么返回空字符串

    • console.log(oCssRules.style.width) // 200px

  • styleMap

    • 下属有一个size属性, 可以获取到该选择器样式表中有多少条属性, 但是它并不准确, padding与margin属性会被识别为4条

  • type

    • 判断这个样式规则对象是哪中类型, 比如普通的选择器样式返回1, @keyframes的样式会返回7

  • cssText

    • 返回该规则对象下的css的字符串形式, 比如
      • .test { width: 200px; height: 200px; border-radius: 50%; background-color: rgb(170, 17, 68); }

添加样式与删除样式

deleteRule

  • 接收一个序数数字, 将对应的cssRule对象从cssRuleList中删除
const aStyleList = document.styleSheets
const oStyle1 = aStyleList.item(1)
oStyle1.deleteRule(0) // 调用deleteRule方法, 传入在cssRuleList数组中的序数, 删除后DOM不再适配对应的样式, 但是样式本身还保存在html文本中

insertRule

  • 接收两个值, 一个是样式的完整字符串, 另一个是要插入的位置序数
const aStyleList = document.styleSheets
const oStyle1 = aStyleList.item(1)
let styleStr = `.test1{width:100px;height:100px;background-color:#cc4;border-radius:50%;}`
oStyle1.insertRule(styleStr)

总结

  • 每个选择器样式组成一个cssRule对象
  • 每个<style>与<link>下的所有的cssRule对象组成一个cssRuleList类数组
  • 多个cssRuleList类数组组成了一个StyleSheetList类数组, document.document.styleSheets获取StyleSheetList类数组
  • cssRule对象中selectorText获取选择器, style属性获取样式对象, type判断是什么类型的样式, cssText返回完整的样式文本
  • cssRuleList类数组下的deleteRule与insertRule方法来删除或新增