使用 JS 來動態操做 css ，你知道幾種方法？

時間 2019-12-08

原文原文鏈接

做者：areknawocss

譯者：前端小智前端

來源：css-tricks.comgit

JavaScript 能夠說是交互之王，它做爲腳本語言加上許多 Web Api 進一步擴展了它的特性集，更加豐富界面交互的可操做性。這類 API 的例子包括WebGL API、Canvas API、DOM API，還有一組不太爲人所知的 CSS API。github

因爲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()一塊兒使用，以一次設置多個樣式屬性。app

// ...
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("")}}`;
}
複製代碼

除了上面的小竅門以外。天然，我們首先須要一種爲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);
複製代碼

運行效果：