使用JS来动态操作css的几种方法

2023-08-04 09:04:04 64

JavaScript可以说是交互之王，它作为脚本语言加上许多WebApi进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类API的例子包括WebGLAPI、CanvasAPI、DOMAPI，还有一组不太为人所知的CSSAPI。

由于JSX和无数JS框架的出现，使通过JSAPI与DOM交互的想法真正流行起来，但是在CSS中使用类似技术似乎并没有很多。当然，存在像CSS-in-JS这类解决方案，但是最流行的解决方案还是基于转译(transpilation)，无需额外运行即可生成CSS。这肯定对性能有好处，因为CSSAPI的使用可能导致额外的重绘，这与DOMAPI的使用一样。但这不是咱们想要的。如果哪天公司要求咱们，既要操纵DOM元素的样式和CSS类，还要像使用HTML一样使用JS创建完整的样式表，该怎么办？

内联样式

在咱们深入一些复杂的知识之前，先回来顾一下一些基础知识。例如，咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式。

constel=document.createElement('div')

el.style.backgroundColor='red'
//或者
el.style.cssText='background-color:red'
//或者
el.setAttribute('style','background-color:red')

直接在.style对象上设置样式属性将需要使用驼峰式命名作为属性键，而不是使用短横线命名。如果咱们需要设置更多的内联样式属性，则可以通过设置.style.cssText属性，以更加高效的方式进行设置。

请记住，给cssText设置后原先的css样式被清掉了，因此，要求咱们一次死一堆样式。

如果这种设置内联样式过于繁琐，咱们还可以考虑将.style与Object.assign()一起使用，以一次设置多个样式属性。

//...
Object.assign(el.style,{
backgroundColor:"red",
margin:"25px"
})

这些“基本知识”比咱们想象的要多得多。.style对象实现CSSStyleDeclaration接口。这说明它带还有一些有趣的属性和方法，这包括刚刚使用的.cssText，还包括.length（设置属性的数量），以及.item()、.getPropertyValue()和.setPropertyValue()之类的方法：

//...
constpropertiesCount=el.style.length
for(leti=0;i
这里有个小窍门-在遍历过程中.item()方法具有按索引访问形式的备用语法。
//...
el.style.item(0)===el.style[0];//true

CSS类


接着，来看看更高级的结构——CSS类，它在检索和设置时具有字符串形式是.classname。
//...
el.className="class-oneclass-two";
el.setAttribute("class","class-oneclass-two");

设置类字符串的另一种方法是设置class属性（与检索相同）。但是，就像使用.style.cssText属性一样，设置.className将要求咱们在字符串中包括给定元素的所有类，包括已更改和未更改的类。
当然，可以使用一些简单的字符串操作来完成这项工作，还有一种就是使用较新的.classList属性，这个属性，IE9不支持它，而IE10和IE11仅部分支持它。
classlist属性实现了DOMTokenList，有一大堆有用的方法。例如.add()、.remove()、.toggle()和.replace()允许咱们更改当前的CSS类集合，而其他的，例如.item()、.entries()或.foreach()则可以简化这个索引集合的遍历过程。
//...
constclassNames=["class-one","class-two","class-three"];
classNames.forEach(className=>{
if(!el.classList.contains(className)){
el.classList.add(className);
}
});


Stylesheets


一直以来，WebApi还有一个StyleSheetList接口，该接口由document.styleSheets属性实现。document.styleSheets只读属性，返回一个由StyleSheet对象组成的StyleSheetList，每个StyleSheet对象都是一个文档中链接或嵌入的样式表。
for(styleSheetofdocument.styleSheets){
console.log(styleSheet);
}

通过打印结果咱们可以知道，每次循环打印的是CSSStyleSheet对象，每个CSSStyleSheet对象由下列属性组成：




属性
描述




media
获取当前样式作用的媒体。


disabled
打开或禁用一张样式表。


href
返回CSSStyleSheet对象连接的样式表地址。


title
返回CSSStyleSheet对象的title值。


type
返回CSSStyleSheet对象的type值，通常是text/css。


parentStyleSheet
返回包含了当前样式表的那张样式表。


ownerNode
返回CSSStyleSheet对象所在的DOM节点，通常是或

在上面的代码中style标签是一个CSSStyleSheet样式表对象，这个样式表对象包含两个CSSStyleRule对象，也就是两个css样式规则。

CSSStyleRule对象具有下列属性:

1.type:返回0-6的数字，表示规则的类型，类型列表如下:

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对象。

//...
construleIndex=styleSheet.insertRule("div{background-color:red}");
construle=styleSheet.cssRules.item(ruleIndex);

rule.selectorText;//"div"
rule.style.backgroundColor;//"red"

实现

现在，咱们对CSS相关的JSApi有了足够的了解，可以创建咱们自己的、小型的、基于运行时的CSS-in-JS实现。咱们的想法是创建一个函数，它传递一个简单的样式配置对象，生成一个新创建的CSS类的哈希名称供以后使用。

实现流程很简单，咱们需要一个能够访问某种样式表的函数，并且只需使用.insertrule()方法和样式配置就可以运行了。先从样式表部分开始：

functioncreateClassName(style){
//...
letstyleSheet;
for(leti=0;i
如果你使用的是ESM或任何其他类型的JS模块系统，则可以在函数外部安全地创建样式表实例，而不必担心其他人对其进行访问。但是，为了演示例，咱们将stylesheet上的.CSSInJS属性设置为标志的形式，通过标志来判断是否要使用它。
现在，如果如果还需要创建一个新的样式表怎么办？最好的选择是创建一个新的