styleSheet是一个样式表,记录了一个html文件中
标签中的样式
对于下面一个html文件
title
content
浏览器打开显示为⬇️
打印出document.styleSheets[0].cssRules
就是第一个style标签中的内容。
如果想打印出第二个标签中的内容:document.styleSheet[1].cssRules
【分析】styleSheet和style标签对应关系
标签=》CSSStyleSheet对象
内容=》CSSStyleSheet对象的cssRules属性
利用insertRule和deleteRule可以动态添加样式和删除样式
用js代码为样式表添加了一个样式,将红色的title覆盖为了黑色,点击按钮,删除添加的样式,title又恢复红色
使用场景:需要频繁增删样式场景
新手引导 1、2、3步需要将底部元素z-index提高,然后恢复原位,怎么做呢,就是使用styleSheet添加和删除样式