Style sheet core members and relationship table

data	type of data	Annotation
document.styleSheets	StyleSheetList	Equivalent to a collection of style tags
document.styleSheets[0]	CSSStyleSheet	CSSStyleSheet inherits from StyleSheet Equivalent to a certain style tag; that is, the legendary [style sheet]
document.styleSheets[0].cssRules	CSSRuleList	A collection of rules equivalent to a certain style tag
document.styleSheets[0].cssRules0	CSSImportRule	Only the text content of [@import url()] can be fetched here, but the content of the rule cannot be fetched
document.styleSheets[0].cssRules[0].styleSheet	CSSStyleSheet	In the case of @import, the next level of styleSheet is of CSSStyleSheet type; @import only corresponds to one style sheet, so styleSheet does not have s, and there is no need to specify a subscript
document.styleSheets[0].cssRules1	CSSStyleRule	CSSStyleRule inherits from CSSRule It is equivalent to a certain rule of a certain style tag; an @import or a pair of {} corresponding content
document.styleSheets[0].cssRules[1].cssText	String	The text of rule 1 of the 0th style sheet; cssText is read-only and has no modification function
document.styleSheets[0].cssRules[0].style	CSSStyleDeclaration	The number subscript is the full attribute name of "non-initial value" (outline will be split into color, style, width)
document.styleSheets[0].cssRules[0].style. Property name	String	The attribute value can be directly obtained by the attribute name; the style can be modified in style

CSSStyleSheet object

Method/attribute	Description	grammar
cssRules	Returns a real-time CSSRuleList, which contains an up-to-date list of CSSRule objects that make up the style sheet
ownerRule	If a style indicates that the document is imported through the @import rule, then the ownerRule property will return the corresponding CSSImportRule object, otherwise it will return null	This method is still a draft, I don't know how to use it
insertRule(rule [, index])	Insert a new rule into a specific position of the style sheet, you need to provide the complete text of the new rule	rule: rule; index: position (default first);
deleteRule(index)	Remove a rule at a specific location from the style sheet	index: position;
rules	Same function as cssRules; obsolete method
addRule(selector, styleBlock, index)	Similar to insertRule() function, different usage; obsolete method	selector: selector; styleBlock: rule text; index: position (default last);
removeRule(index)	Same usage as deleteRule(); obsolete method	index: position;

Note: Although several methods such as insertRule are a method of CSSStyleSheet, the actual insertion place is the internal CSSRuleList of CSSStyleSheet.cssRules

StyleSheet object

Method/attribute	Description
disabled	Returns Boolean indicating whether the current style sheet is available
href	Returns DOMString indicating the position of the style sheet
media	Returns the MediaList that represents the expected target media of the style
ownerNode	Return to Node to associate this style sheet with the current document
parentStyleSheet	Return StyleSheet if there is any; return null if there is no
title	返回 DOMString 表示当前样式表的顾问标题
type	返回 DOMString 表示当前样式表的语言

demo 中的表格同以上表格
demo 主要目的是示范用 javascript 控制样式表

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>js 样式表入门基础及简单操作</title>
	<link rel="stylesheet" href="./css/outsideStyle.css">
	<style>
		@import url("./css/outsideStyle.css");

		* {
     
     
			outline: 1px red solid;
		}

		#box1 {
     
     
			font-size: 30px;
		}

		p {
     
     
			font-size: 20px;
			height: 100px;
			width: 300px;
		}

		#box2 ::after {
     
     
			display: block;
			outline: 1px green solid;
			height: 50px;
			content: "attr()";
			font-size: 12px;
		}
	</style>
	<style>
		#box3 {
     
     
			color: red;
		}
	</style>
</head>

<body>

	<h1>样式表核心成员及关系表</h1>
	<table>
		<tr>
			<th>数据</th>
			<th>数据类型</th>
			<th>注释</th>
		</tr>
		<tr>
			<td>document.styleSheets</td>
			<td>StyleSheetList</td>
			<td>相当于 style 标签的集合</td>
		</tr>
		<tr>
			<td>document.styleSheets[0]</td>
			<td>CSSStyleSheet</td>
			<td>
				<div>CSSStyleSheet 继承自 StyleSheet</div>
				<div>相当于某个 style 标签; 也就是传说中的[样式表]</div>
			</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules</td>
			<td>CSSRuleList</td>
			<td>相当于某个 style 标签的规则的集合</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules[0](@import)</td>
			<td>CSSImportRule</td>
			<td>这里只能取到 [@import url()] 的文本内容, 并不能取到规则内容</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules[0].styleSheet</td>
			<td>CSSStyleSheet</td>
			<td>@import 的情况, 下一层 styleSheet 又是 CSSStyleSheet 类型; @import 只对应一个样式表, 所以 styleSheet 没有 s, 也不用指定下标</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules[1](常规的{})</td>
			<td>CSSStyleRule</td>
			<td>
				<div>CSSStyleRule 继承自 CSSRule</div>
				<div>相当于某个 style 标签的某条规则; 一个 @import 或者一对{}对应的内容</div>
			</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules[1].cssText</td>
			<td>String</td>
			<td>第0个样式表的第1条规则的文本;cssText 是只读, 没有修改功能</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules[0].style</td>
			<td>CSSStyleDeclaration</td>
			<td>数字下标的是"非初始值"的完整属性名(outline 会被拆分成 color, style, width)</td>
		</tr>
		<tr>
			<td>document.styleSheets[0].cssRules[0].style.属性名</td>
			<td>String</td>
			<td>用属性名可以直接取到属性值;在style可以修改样式</td>
		</tr>
	</table>

	<h1>CSSStyleSheet 对象</h1>
	<table>
		<tr>
			<th>方法/属性</th>
			<th>说明</th>
			<th>语法</th>
		</tr>
		<tr>
			<td>cssRules</td>
			<td>返回一个实时的 CSSRuleList，其中包含组成样式表的 CSSRule 对象的一个最新列表</td>
			<td></td>
		</tr>
		<tr>
			<td>ownerRule</td>
			<td>如果一个样式表示通过@import 规则引入文档，那么 ownerRule 属性会返回相应的CSSImportRule对象，否则返回 null</td>
			<td>这个方法还是草案, 不知道怎么用</td>
		</tr>
		<tr>
			<td>insertRule(rule [, index])</td>
			<td>向样式表的特定位置插入一条新规则，需要提供新规则的完整文本</td>
			<td>rule: 规则; index: 位置(默认最前);</td>
		</tr>
		<tr>
			<td>deleteRule(index)</td>
			<td>从样式表中删除特定位置的一条规则</td>
			<td>index: 位置;</td>
		</tr>
		<tr>
			<td>rules</td>
			<td>跟 cssRules 功能用法相同; 过时方法</td>
			<td></td>
		</tr>
		<tr>
			<td>addRule(selector, styleBlock, index)</td>
			<td>跟 insertRule() 功能相似, 用法不同; 过时方法</td>
			<td>selector: 选择器; styleBlock: 规则正文; index: 位置(默认最后);</td>
		</tr>
		<tr>
			<td>removeRule(index)</td>
			<td>跟 deleteRule() 功能用法相同; 过时方法</td>
			<td>index: 位置;</td>
		</tr>
	</table>
	<div>注意：尽管 insertRule 等几个方法是 CSSStyleSheet 的一个方法，但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList。</div>

	<h1>StyleSheet 对象</h1>
	<table>
		<tr>
			<th>方法/属性</th>
			<th>说明</th>
		</tr>
		<tr>
			<td>disabled</td>
			<td>返回Boolean表示当前样式表是否可用</td>
		</tr>
		<tr>
			<td>href</td>
			<td>返回 DOMString 表示样式表的位置</td>
		</tr>
		<tr>
			<td>media</td>
			<td>返回 MediaList 表示样式的预期目标媒体</td>
		</tr>
		<tr>
			<td>ownerNode</td>
			<td>返回 Node 将此样式表与当前文档相关联</td>
		</tr>
		<tr>
			<td>parentStyleSheet</td>
			<td>返回 StyleSheet 如果有的话; 返回 null 如果没有</td>
		</tr>
		<tr>
			<td>title</td>
			<td>返回 DOMString 表示当前样式表的顾问标题</td>
		</tr>
		<tr>
			<td>type</td>
			<td>返回 DOMString 表示当前样式表的语言</td>
		</tr>
	</table>

	<script type="text/javascript">
		"use strict"

		window.onload = function (params) {
     
     

			console.log(document.styleSheets)
			console.log(document.styleSheets[0])
			console.log(document.styleSheets[1].cssRules)
			console.log(document.styleSheets[0].cssRules[0])
			console.log(document.styleSheets[0].cssRules[0].cssText)

			document.styleSheets[1].insertRule("#swq{color:#000}", 1)
			document.styleSheets[1].addRule("#swq", "color:#000", 1)
			document.styleSheets[1].deleteRule(0)
			document.styleSheets[1].removeRule(0)

		}
	</script>
</body>

</html>

参考资料:
styleSheet;
StyleSheet - Web API 接口参考 | MDN;
CSSStyleSheet - Web API 接口参考 | MDN;
Document.styleSheets - Web API 接口参考 | MDN;

end

The basics and simple operation of js stylesheets

Style sheet core members and relationship table

CSSStyleSheet object

StyleSheet object

Guess you like