js修改style样式_使⽤JS来动态操作css，你知道⼏种⽅法？JavaScript 可以说是交互之王，它作为脚本语⾔加上许多 Web Api 进⼀步扩展了它的特性集，更加丰富界⾯交互的可操作性。这类 API
的例⼦包括WebGL API、Canvas API、DOM API，还有⼀组不太为⼈所知的 CSS API。cssclass属性
由于JSX和⽆数JS框架的出现，使通过JS API与DOM交互的想法真正流⾏起来，但是在 CSS 中使⽤类似技术似乎并没有很多。当然，存
在像CSS-in-JS这类解决⽅案，但是最流⾏的解决⽅案还是基于转译(transpilation)，⽆需额外运⾏即可⽣成 CSS。这肯定对性能有好处，
因为CSS API的使⽤可能导致额外的重绘，这与DOM API的使⽤⼀样。但这不是咱们想要的。如果哪天公司要求咱们，既要操纵 DOM 元
素的样式和 CSS 类，还要像使⽤ HTML ⼀样使⽤ JS 创建完整的样式表，该怎么办？
内联样式
在咱们深⼊⼀些复杂的知识之前，先回来顾⼀下⼀些基础知识。例如，咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内
联样式。
const el = ateElement('div')el.style.backgroundColor = 'red'// 或者 el.style.cssText = 'background-color: red'// 或者el.setAttribute('style', 'background-
直接在.style对象上设置样式属性将需要使⽤驼峰式命名作为属性键，⽽不是使⽤短横线命名。如果咱们需要设置更多的内联样式属性，则
可以通过设置.style.cssText属性，以更加⾼效的⽅式进⾏设置 。
我⾃⼰是⼀名从事了多年开发的web前端⽼程序员，⽬前辞职在做⾃⼰的web前端私⼈定制课程，今年年初我花了⼀个⽉整理了⼀份最适合
2019年学习的web前端学习⼲货，各种框架都有整理，送给每⼀位前端⼩伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，
即可免费获取
请记住，给cssText设置后原先的css样式被清掉了，因此，要求咱们⼀次死⼀堆样式 。
如果这种设置内联样式过于繁琐，咱们还可以考虑将.style与Object.assign()⼀起使⽤，以⼀次设置多个样式属性。
// ...Object.assign(el.style, { backgroundColor: "red", margin: "25px"})
这些“基本知识”⽐咱们想象的要多得多。.style对象实现CSSStyleDeclaration接⼝。这说明它带还有⼀些有趣的属性和⽅法，这包括刚
刚使⽤的.cssText，还包括.length(设置属性的数量)，以及.item()、.getPropertyValue()和.setPropertyValue()之类的⽅法：
// ...const propertiesCount = el.style.lengthfor(let i = 0; i < propertiesCount; i++) { const name = el.style.item(i) // 'background-color' const value =
这⾥有个⼩窍门-在遍历过程中.item()⽅法具有按索引访问形式的备⽤语法。
// ...el.style.item(0) === el.style[0]; // true
CSS 类
接着，来看看更⾼级的结构——CSS类，它在检索和设置时具有字符串形式是.classname。
// ...el.className = "class-one class-two";el.setAttribute("class", "class-one class-two");
设置类字符串的另⼀种⽅法是设置class属性(与检索相同)。但是，就像使⽤.style.cssText属性⼀样，设置.className将要求咱们在字符
串中包括给定元素的所有类，包括已更改和未更改的类。
当然，可以使⽤⼀些简单的字符串操作来完成这项⼯作，还有⼀种就是使⽤较新的.classList属性，这个属性，IE9 不⽀持它，⽽ IE10 和
IE11 仅部分⽀持它。
classlist属性实现了DOMTokenList，有⼀⼤堆有⽤的⽅法。例如.add()、.remove()、.toggle()和.replace()允许咱们更改当前的 CSS 类
集合，⽽其他的，例如.item()、.entries()或.foreach()则可以简化这个索引集合的遍历过程。
// ...const classNames = ["class-one", "class-two", "class-three"];classNames.forEach(className => { if(!ains(className)) { el.classList.add Stylesheets
⼀直以来，Web Api 还有⼀个StyleSheetList接⼝，该接⼝由document.styleSheets属性实现。document.styleSheets 只读属性，返
回⼀个由 StyleSheet 对象组成的 StyleSheetList，每个 StyleSheet 对象都是⼀个⽂档中链接或嵌⼊的样式表。
for(styleSheet of document.styleSheets){ console.log(styleSheet);}
通过打印结果咱们可以知道，每次循环打印的是 CSSStyleSheet 对象，每个 CSSStyleSheet 对象由下列属性组成：
属性描述media获取当前样式作⽤的媒体。disabled打开或禁⽤⼀张样式表。href返回 CSSStyleSheet 对象连接的样式表地址。title返回CSSStyleSheet 对象的title值。type返回 CSSStyleSheet 对象的type值，通常是text/css。parentStyleSheet返回包含了当前样式表的那张样式表。ownerNode返回CSSStyleSheet对象所在的DOM节点，通常是或
** CSSStyleSheet对象⽅法: **
⽅法描述insertRule()在当前样式表的 cssRules 对象插⼊CSS规则。deleteRule()在当前样式表删除 cssRules 对象的CSS规则。
有了StyleSheetList的全部内容，咱们来CSSStyleSheet本⾝。在这⾥就有点意思了， CSSStyleSheet扩展了StyleSheet接⼝，并且只
有这种只读属性，如.ownerNode，.href，.title或.type，它们⼤多直接从声明给定样式表的地⽅获取。回想⼀下加载外部CSS⽂件的标准HTML代码，咱们就会明⽩这句话是啥意思：
现在，咱们知道HTML⽂档可以包含多个样式表，所有这些样式表都可以包含不同的规则，甚⾄可以包含更多的样式表(当使⽤@import 时)。CSSStyleSheet有两个⽅法:、.insertrule()和.deleterule() 来增加和删除 Css 规则。
// ...const ruleIndex = styleSheet.insertRule("div {background-color: red}");styleSheet.deleteRule(ruleIndex);
.insertRule(rule,index)：此函数可以在cssRules规则集合中插⼊⼀个指定的规则，参数rule是标⽰规则的字符串，参数index是值规则字符
串插⼊的位置。
deleteRule(index)：此函数可以删除指定索引的规规则，参数index规定规则的索引。
CSSStyleSheet也有⾃⼰的两个属性：.ownerRule和.cssRule。虽然.ownerRule与@import相关，但⽐较有趣的是.cssRules。简单地说，它是CSSRuleList的CSSRule，可以使⽤前⾯提到的.insertrule()和.deleterule()⽅法修改它。请记住，有些浏览器可能会阻⽌咱们从
不同的来源(域)访问外部CSSStyleSheet的.cssRules属性。
那么什么是 CSSRuleList？
CSSRuleList是⼀个数组对象包含着⼀个有序的CSSRule对象的集合。每⼀个CSSRule可以通过rules.item(index)的形式访问, 或者
rules[index]。这⾥的rules是⼀个实现了CSSRuleList接⼝的对象， index是⼀个基于0开始的，顺序与CSS样式表中的顺序是⼀致的。样式对象的个数是通过rules.length表达。
对于CSSStyleRule对象:
每⼀个样式表CSSStyleSheet对象可以包含若⼲CSSStyleRule对象，也就是css样式规则，如下:
在上⾯的代码中style标签是⼀个CSSStyleSheet样式表对象，这个样式表对象包含两个CSSStyleRule对象，也就是两个css样式规则。CSSStyleRule对象具有下列属性:
0：CSSRule.UNKNOWN_RULE。
1：CSSRule.STYLE_RULE (定义⼀个CSSStyleRule对象)。
2：CSSRule.CHARSET_RULE (定义⼀个CSSCharsetRule对象，⽤于设定当前样式表的字符集，默认与当前⽹页相同)。
3：CSSRule.IMPORT_RULE (定义⼀个CSSImportRule对象，就是⽤@import引⼊其他的样式表)
4：CSSRule.MEDIA_RULE (定义⼀个CSSMediaRule对象，⽤于设定此样式是⽤于显⽰器，打印机还是投影机等等)。
5：CSSRule.FONT_FACE_RULE (定义⼀个CSSFontFaceRule对象，CSS3的@font-face)。
6：CSSRule.PAGE_RULE (定义⼀个CSSPageRule对象)。
2.cssText：返回⼀个字符串，表⽰的是当前规则的内容，例如:
div{color: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.sty 实现
现在，咱们对 CSS 相关的 JS Api有了⾜够的了解，可以创建咱们⾃⼰的、⼩型的、基于运⾏时的CSS-in-JS实现。咱们的想法是创建⼀个函数，它传递⼀个简单的样式配置对象，⽣成⼀个新创建的CSS类的哈希名称供以后使⽤。
实现流程很简单，咱们需要⼀个能够访问某种样式表的函数，并且只需使⽤.insertrule()⽅法和样式配置就可以运⾏了。先从样式表部分开始：
function createClassName(style) { // ... let styleSheet; for (let i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].CSSInJS) { styleShee
如果你使⽤的是ESM或任何其他类型的JS模块系统，则可以在函数外部安全地创建样式表实例，⽽不必担⼼其他⼈对其进⾏访问。但是，
为了演⽰例，咱们将stylesheet上的.CSSInJS属性设置为标志的形式，通过标志来判断是否要使⽤它。
现在，如果如果还需要创建⼀个新的样式表怎么办？ 最好的选择是创建⼀个新的标记，并将其附加到HTML⽂档的
上。这会⾃动将新样式表添加到document.styleSheets列表，并允许咱们通过

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。