styleSheets的用法
时间: 2024-03-12 22:45:59 浏览: 20
`document.styleSheets` 是一个只读属性,它返回一个包含当前文档所有样式表的 StyleSheetList 对象。可以使用这个对象来获取和修改样式表。
下面是一些常用的 `styleSheets` 的用法:
1. 获取样式表列表
```javascript
const styleSheets = document.styleSheets;
console.log(styleSheets); // 返回一个包含当前文档所有样式表的 StyleSheetList 对象。
```
2. 获取指定样式表
```javascript
const styleSheets = document.styleSheets;
const styleSheet = styleSheets[0]; // 获取第一个样式表
console.log(styleSheet); // 返回第一个样式表
```
3. 获取样式规则列表
```javascript
const styleSheets = document.styleSheets;
const styleSheet = styleSheets[0]; // 获取第一个样式表
const rules = styleSheet.cssRules || styleSheet.rules; // 获取样式规则列表
console.log(rules); // 返回样式规则列表
```
4. 插入新样式规则
```javascript
const styleSheets = document.styleSheets;
const styleSheet = styleSheets[0]; // 获取第一个样式表
styleSheet.insertRule('.new-rule { color: red; }', 0); // 在第一个位置插入一条新的样式规则
```
5. 修改样式规则
```javascript
const styleSheets = document.styleSheets;
const styleSheet = styleSheets[0]; // 获取第一个样式表
const rules = styleSheet.cssRules || styleSheet.rules; // 获取样式规则列表
const rule = rules[0]; // 获取第一个样式规则
rule.style.color = 'red'; // 修改样式规则的颜色为红色
```
总之,`document.styleSheets` 提供了一种非常灵活的方式来操作样式表中的样式规则。