スタイルシートのコアメンバーと関係テーブル

データ	データの種類	注釈
document.styleSheets	StyleSheetList	スタイルタグのコレクションに相当します
document.styleSheets [0]	CSSStyleSheet	CSSStyleSheetはStyleSheetから継承します特定のスタイルタグに相当します。つまり、伝説的な[スタイルシート]
document.styleSheets [0] .cssRules	CSSRuleList	特定のスタイルタグに相当するルールのコレクション
document.styleSheets [0] .cssRules 0	CSSImportRule	ここでは[@importurl（）]のテキストコンテンツのみをフェッチできますが、ルールのコンテンツはフェッチできません。
document.styleSheets [0] .cssRules [0] .styleSheet	CSSStyleSheet	@importの場合、styleSheetの次のレベルはCSSStyleSheetタイプです。@ importは1つのスタイルシートにのみ対応するため、styleSheetにはsがなく、添え字を指定する必要はありません。
document.styleSheets [0] .cssRules 1	CSSStyleRule	CSSStyleRuleはCSSRuleから継承しますこれは、特定のスタイルタグの特定のルール、@ importまたは{}対応するコンテンツのペアと同等です。
document.styleSheets [0] .cssRules [1] .cssText	ストリング	0番目のスタイルシートのルール1のテキスト; cssTextは読み取り専用であり、変更機能はありません
document.styleSheets [0] .cssRules [0] .style	CSSStyleDeclaration	数字の下付き文字は、「非初期値」の完全な属性名です（アウトラインは色、スタイル、幅に分割されます）
document.styleSheets [0] .cssRules [0] .style。プロパティ名	ストリング	属性値は属性名で直接取得できます。スタイルはスタイルで変更できます。

CSSStyleSheetオブジェクト

メソッド/属性	説明	文法
cssRules	スタイルシートを構成するCSSRuleオブジェクトの最新リストを含むリアルタイムCSSRuleListを返します
ownerRule	ドキュメントが@importルールを介してインポートされることをスタイルが示している場合、ownerRuleプロパティは対応するCSSImportRuleオブジェクトを返します。それ以外の場合は、nullを返します。	この方法はまだドラフトです、私はそれを使用する方法がわかりません
insertRule（rule [、index]）	スタイルシートの特定の位置に新しいルールを挿入します。新しいルールの完全なテキストを提供する必要があります	ルール：ルール;インデックス：位置（デフォルトが最初）;
deleteRule（index）	スタイルシートから特定の場所のルールを削除する	インデックス：位置;
ルール	cssRulesと同じ関数;廃止されたメソッド
addRule（selector、styleBlock、index）	insertRule（）関数と同様に、使用法が異なります。廃止されたメソッド	セレクター：セレクター; styleBlock：ルールテキスト;インデックス：位置（デフォルトは最後）;
removeRule（index）	deleteRule（）;と同じ関数の使用法廃止されたメソッド	インデックス：位置;

注：insertRuleなどのいくつかのメソッドはCSSStyleSheetのメソッドですが、実際の挿入場所はCSSStyleSheet.cssRulesの内部CSSRuleListです。

StyleSheetオブジェクト

メソッド/属性	説明
無効	現在のスタイルシートが使用可能かどうかを示すブール値を返します
href	スタイルシートの位置を示すDOMStringを返します
メディア	スタイルの予想されるターゲットメディアを表すMediaListを返します
ownerNode	ノードに戻って、このスタイルシートを現在のドキュメントに関連付けます
parentStyleSheet	存在する場合はStyleSheetを返し、存在しない場合はnullを返します
題名	返回 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

jsスタイルシートの基本と簡単な操作

スタイルシートのコアメンバーと関係テーブル

CSSStyleSheetオブジェクト

StyleSheetオブジェクト

おすすめ