乐趣区

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

jiezi

作者：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.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);

运行成果：

总结

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

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

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

交换

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

退出移动版