它在检索和设置时具有字符串形式是.classname。
... el.className = ; el.setAttribute(, );
设置类字符串的另一种方法是设置class属性（与检索相同）。 但是，就像使用.style.cssText属性一样，设置.className将要求咱们在字符串中包括给定元素的所有类，包括已更改和未更改的类。
当然，可以使用一些简单的字符串操作来完成这项工作，还有一种就是使用较新的.classList属性，这个属性，IE9 不支持它，而 IE10 和 IE11 仅部分支持它。
classlist属性实现了DOMTokenList，有一大堆有用的方法。例如.add()、.remove()、.toggle()和.replace()允许咱们更改当前的 CSS 类集合，而其他的，例如.item()、.entries()或.foreach()则可以简化这个索引集合的遍历过程。
const classNames = [, , ];
classNames.( => { (!el.classList.contains()) {
el.classList.add();
}
});一直以来，Web Api 还有一个StyleSheetList接口，该接口由document.styleSheets属性实现。 document.styleSheets 只读属性，返回一个由 StyleSheet 对象组成的 StyleSheetList，每个 StyleSheet 对象都是一个文档中链接或嵌入的样式表。
(styleSheet of document.styleSheets){
console(styleSheet);
}通过打印结果咱们可以知道，每次循环打印的是 CSSStyleSheet 对象，每个 CSSStyleSheet 对象由下列属性组成：
| 属性 | 描述 |
|---|---|
| media | 获取当前样式作用的媒体。 |
| disabled | 打开或禁用一张样式表。 |
| href | 返回 CSSStyleSheet 对象连接的样式表地址。 |
| title | 返回 CSSStyleSheet 对象的title值。 |
| type | 返回 CSSStyleSheet 对象的type值，通常是text/css。 |
| parentStyleSheet | 返回包含了当前样式表的那张样式表。 |
| ownerNode | 返回CSSStyleSheet对象所在的DOM节点，通常是<link>或<style>。 |
| cssRules | 返回样式表中所有的规则。 |
| ownerRule | 如果是通过@import导入的，属性就是指向表示导入的规则的指针，否则值为null。IE不支持这个属性。 |
| 方法 | 描述 |
|---|---|
| insertRule() | 在当前样式表的 cssRules 对象插入CSS规则。 |
| deleteRule() | 在当前样式表删除 cssRules 对象的CSS规则。 |
有了StyleSheetList的全部内容，咱们来CSSStyleSheet本身。 在这里就有点意思了， CSSStyleSheet扩展了StyleSheet接口，并且只有这种只读属性，如.ownerNode，.href，.title或.type，它们大多直接从声明给定样式表的地方获取。回想一下加载外部CSS文件的标准HTML代码，咱们就会明白这句话是啥意思：
<head> <link rel type href title> </head>
现在，咱们知道HTML文档可以包含多个样式表，所有这些样式表都可以包含不同的规则，甚至可以包含更多的样式表(当使用@import时)。CSSStyleSheet有两个方法:、.insertrule()和.deleterule() 来增加和删除 Css 规则。
const ruleIndex = styleSheet.insert; styleSheet.delete;
insertRule(rule,index) :此函数可以在cssRules规则集合中插入一个指定的规则，参数rule是标示规则的字符串，参数index是值规则字符串插入的位置。
deleteRule(index):此函数可以删除指定索引的规规则，参数index规定规则的索引。
CSSStyleSheet也有自己的两个属性：.ownerRule和.cssRule。虽然.ownerRule与@import相关，但比较有趣的是.cssRules 。简单地说，它是CSSRuleList的CSSRule，可以使用前面提到的.insertrule()和.deleterule()方法修改它。请记住，有些浏览器可能会阻止咱们从不同的来源(域)访问外部CSSStyleSheet的.cssRules属性。
CSSRuleList是一个数组对象包含着一个有序的CSSRule对象的集合。每一个CSSRule可以通过rules.item(index)的形式访问, 或者rules[index]。 这里的rules是一个实现了CSSRuleList接口的对象， index是一个基于0开始的，顺序与CSS样式表中的顺序是一致的。样式对象的个数是通过rules.length表达。
每一个样式表CSSStyleSheet对象可以包含若干CSSStyleRule对象，也就是css样式规则，如下:
<style type="text/css">
h1{color:red} div{color:green}</style>在上面的代码中style标签是一个CSSStyleSheet样式表对象，这个样式表对象包含两个CSSStyleRule对象，也就是两个css样式规则。
1.type:返回0-6的数字，表示规则的类型，类型列表如下:
CSSRule.UNKNOWN_RULE。
CSSRule.STYLE_RULE （定义一个CSSStyleRule对象）。
CSSRule.CHARSET_RULE （定义一个CSSCharsetRule对象，用于设定当前样式表的字符集，默认与当前网页相同）。
CSSRule.IMPORT_RULE （定义一个CSSImportRule对象，就是用@import引入其他的样式表）
CSSRule.MEDIA_RULE （定义一个CSSMediaRule对象，用于设定此样式是用于显示器，打印机还是投影机等等）。
CSSRule.FONT_FACE_RULE （定义一个CSSFontFaceRule对象，CSS3的@font-face）。
CSSRule.PAGE_RULE （定义一个CSSPageRule对象）。
2.cssText:返回一个字符串，表示的是当前规则的内容，例如:
{:green}3.parentStyleSheet:返回所在的CSSStyleRule对象。
4.parentRule:如果规则位于另一规则中，该属性引用另一个CSSRule对象。
5.selectorText:返回此规则的选择器，如上面的div就是选择器。
6.style:返回一个CSSStyleDeclaration对象。
// ...
const ruleIndex = styleSheet.insertRule("div {background-color: red}");
const rule = styleSheet.cssRules.item(ruleIndex);
rule.selectorText; // "div"
rule.style.backgroundColor; // "red"
原文链接: https://www.yukx.com/xiaomengbao/article/details/2373.html 优科学习网JS 获取CSS 文件里面的样式名和属性值-CSS 类
