极客教程CSSStyleSheet cssRules属性
在本文中，我们将讨论CSSStyleSheet的cssRules属性，以及通过适当的示例了解其基本实现。
cssRules 是一个仅读属性，对于文档返回CSSStyleSheet对象的StyleSheetList，该对象明确链接到文档中的样式表或嵌入到文档中。它返回文档的 第i个样式表 。
语法：
let stylesheet = document.styleSheets[i];
let styleRules = stylesheet.cssRules;
注意： 这里的 i = 0, 1, 2, 3, 4, … 表示文档中附加的第 i 个样式表。
返回值： 它返回一个类似于数组的对象，其中每个 CSS 样式规则都是数组的一个元素，每个索引的 CSS 样式规则包含在一个对象中的一组属性中。您可以使用索引值如 0、1、2、3… 等访问 CSS 样式规则。
属性 styleSheets.cssRules 有助于获取附加到文档的样式表，并获取和更新样式表的 CSS 规则。这些方法还有助于更新与单个 HTML 元素相关的样式表中的 CSS 规则。
示例1： 在这个示例中，我们创建了一个 HTML 文档。该文档包含 h2、h3、button 和 div 元素。按钮将在控制台中显示 CSS 样式规则。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
h2 {
color: green;
}
h3 {
color: blue;
}
#container {
width: 400px;
height: auto;
font-size: 12px;
font-weight: 200;
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>document.styleSheets.cssRules</h3>
<div id="container">
A Computer Science portal for geeks. It contains
well written, well thought and well explained
computer science and programming articles.
</div>
<br>
<button onclick="GetCSSRules()">
GetCSSRules
</button>
<script>
const GetCSSRules = () => {
let style_sheet = document.styleSheets[0];
let CSS_Rules = style_sheet.cssRules;
console.log(CSS_Rules);
}
</script>
</body>
</html>
输出： 控制台输出包含CSS样式规则对象，其中每个元素是CSS样式规则项目，对应的CSS属性是规则。
示例2： 在这个例子中，我们通过更新CSS样式规则来更新div元素文本的颜色和字体粗细。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
h2 {
color: green;
}
h3 {
color: blue;
}
#container {
width: 400px;
height: auto;
font-size: 12px;
font-weight: 200;
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
document.styleSheets.cssRules
</h3>
<div id="container">
A Computer Science portal for geeks. It contains
well written, well thought and well explained
computer science and programming articles.
</div>
<br>
<button onclick="GetCSSRules()">
GetCSSRules
</button>
<script>
const GetCSSRules = () => {
let style_sheet = document.styleSheets[0];
let Div_CSS_Rules = style_sheet.cssRules[2];
Div_CSS_Rules.style.color = 'crimson';
Div_CSS_Rules.style.fontWeight = '900';
}
</script>
</body>
</html>
输出：
示例3： 在这个例子中，我们使用以下方法将一个新的CSS样式规则 text-decoration: underline 插入到样式表的第2个位置。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
h2 {
color: green;
}
h3 {
color: blue;
}
#container {
width: 400px;
height: auto;
font-size: 12px;
font-weight: 200;
border: 1px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
document.styleSheets.cssRules
</h3>
<div id="container">
A Computer Science portal for geeks. It contains
well written, well thought and well explained
computer science and programming articles.
</div>
<br>
<button onclick="InsertCSSRules()">
InsertCSSRules
</button>
<script>
const InsertCSSRules = () => {
let style_sheet = document.styleSheets[0];
style_sheet.insertRule(
"#container{text-decoration:underline;}", 2);
}
</script>
</body>
</html>
输出：
