关于javascript:使用-JavaScript-来动态操作-css-你知道几种方法

作者：areknawo
译者：前端小智
起源：css-tricks.com

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

JavaScript 能够说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩大了它的个性集，更加丰盛界面交互的可操作性。这类 API 的例子包含WebGL API、Canvas API、DOM API，还有一组不太为人所知的 CSS API。

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

内联款式

在咱们深刻一些简单的常识之前，先回来顾一下一些基础知识。例如，咱们能够通过批改它的.style属性来编辑给定的HTMLElement的内联款式。

const el = 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()之类的办法：

// ...const propertiesCount = el.style.lengthfor(let i = 0; i < propertiesCount; i++) {    const name = el.style.item(i) // 'background-color'    const value = el.style.getPropertyValue(name) // 're'    const priority = el.style.getPropertyPriority(name) // 'important'        if(priority === 'important') {        el.style.removeProperty()    }}

这里有个小窍门-在遍历过程中.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(!el.classList.contains(className)) {        el.classList.add(className);    }});

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节点，通常是<link>或<style>。
cssRules	返回样式表中所有的规定。
ownerRule	如果是通过@import导入的，属性就是指向示意导入的规定的指针，否则值为null。IE不反对这个属性。

CSSStyleSheet对象办法:

办法	形容
insertRule()	在以后样式表的 cssRules 对象插入CSS规定。
deleteRule()	在以后样式表删除 cssRules 对象的CSS规定。

有了StyleSheetList的全部内容，咱们来CSSStyleSheet自身。在这里就有点意思了， CSSStyleSheet扩大了StyleSheet接口，并且只有这种只读属性，如.ownerNode，.href，.title或.type，它们大多间接从申明给定样式表的中央获取。回忆一下加载内部CSS文件的规范HTML代码，咱们就会明确这句话是啥意思：

<head><link rel="stylesheet" type="text/css" href="style.css" title="Styles"></head>

当初，咱们晓得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 type="text/css">  h1{color:red}  div{color:green}</style>

在下面的代码中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对象。

// ...const ruleIndex = styleSheet.insertRule("div {background-color: red}");const rule = styleSheet.cssRules.item(ruleIndex);rule.selectorText; // "div"rule.style.backgroundColor; // "red"

实现

当初，咱们对 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) {      styleSheet = document.styleSheets[i];      break;    }  }  if (!styleSheet) {    const style = document.createElement("style");    document.head.appendChild(style);    styleSheet = style.sheet;    styleSheet.CSSInJS = true;  }  // ...}

如果你应用的是ESM或任何其余类型的JS模块零碎，则能够在函数内部平安地创立样式表实例，而不用放心其他人对其进行拜访。然而，为了演示例，咱们将stylesheet上的.CSSInJS属性设置为标记的模式，通过标记来判断是否要应用它。

当初，如果如果还须要创立一个新的样式表怎么办？最好的抉择是创立一个新的<style/>标记，并将其附加到HTML文档的<head/>上。这会主动将新样式表增加到document.styleSheets列表，并容许咱们通过<style/>标记的.sheet属性对其进行拜访，是不是很机智？

function createRandomName() {  const code = Math.random().toString(36).substring(7);  return `css-${code}`;}function phraseStyle(style) {  const keys = Object.keys(style);  const keyValue = keys.map(key => {    const kebabCaseKey =         key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();    const value =         `${style[key]}${typeof style[key] === "number" ? "px" : ""}`;        return `${kebabCaseKey}:${value};`;  });    return `{${keyValue.join("")}}`;}

除了下面的小窍门之外。天然，咱们首先须要一种为CSS类生成新的随机名称的办法。而后，将款式对象正确地表白为可行的CSS字符串的模式。这包含驼峰命名和短横线全名之间的转换，以及可选的像素单位（px）转换的解决。

function createClassName(style) {  const className = createRandomName();  let styleSheet;  // ...  styleSheet.insertRule(`.${className}${phraseStyle(style)}`);  return className;}

残缺代码如下：

HTML

<div id="el"></div>

function createRandomName() {  const code = Math.random().toString(36).substring(7);  return `css-${code}`;}function phraseStyle(style) {  const keys = Object.keys(style);  const keyValue = keys.map(key => {    const kebabCaseKey = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();    const value = `${style[key]}${typeof style[key] === "number" ? "px" : ""}`;    return `${kebabCaseKey}:${value};`;  });  return `{${keyValue.join("")}}`;}function createClassName(style) {  const className = createRandomName();  let styleSheet;  for (let i = 0; i < document.styleSheets.length; i++) {    if (document.styleSheets[i].CSSInJS) {      styleSheet = document.styleSheets[i];      break;    }  }  if (!styleSheet) {    const style = document.createElement("style");    document.head.appendChild(style);    styleSheet = style.sheet;    styleSheet.CSSInJS = true;  }  styleSheet.insertRule(`.${className}${phraseStyle(style)}`);  return className;}const el = document.getElementById("el");const redRect = createClassName({  width: 100,  height: 100,  backgroundColor: "red"});el.classList.add(redRect);

运行成果：

总结

正如本文咱们所看到的，应用 JS 操作CSS 是一件十分乏味的事，咱们能够开掘很多好用的 API,下面的例子只是冰山一角，在CSS API(或者更确切地说是API)中还有更多办法，它们正等着被揭开神秘面纱。

原文：https://css-tricks.com/an-int...

编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。