使用 JS 来动态操做 css ，你知道几种方法？

时间  2019-12-27
标签 使用 动态 css 知道 几种 方法 栏目 JavaScript 繁體版
原文   原文链接
做者：areknawo
译者：前端小智
来源：css-tricks.com

我的专栏 ES6 深刻浅出已上线，深刻ES6 ，经过案例学习掌握 ES6 中新特性一些使用技巧及原理，持续更新中，←点击可订阅。css

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。html

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 建立完整的样式表，该怎么办？git

内联样式

在我们深刻一些复杂的知识以前，先回来顾一下一些基础知识。例如，我们能够经过修改它的.style属性来编辑给定的HTMLElement的内联样式。github

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.length
for(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("")}}`;
}

除了上面的小窍门以外。 天然，我们首先须要一种为CS​​S类生成新的随机名称的方法。 而后，将样式对象正确地表达为可行的CSS字符串的形式。 这包括驼峰命名和短横线全名之间的转换，以及可选的像素单位（px）转换的处理。

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

完整代码以下：

HTML

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

JS

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);

运行效果：

clipboard.png

总结

正如本文我们所看到的，使用 JS 操做CSS 是一件很是有趣的事，我们能够挖掘不少好用的 API,上面的例子只是冰山一角，在CSS API(或者更确切地说是API)中还有更多方法，它们正等着被揭开神秘面纱。

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

编辑中可能存在的bug无法实时知道，过后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq449245884/xiaozhi

由于篇幅的限制，今天的分享只到这里。若是你们想了解更多的内容的话，能够去扫一扫每篇文章最下面的二维码，而后关注我们的微信公众号，了解更多的资讯和有价值的内容。

clipboard.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程