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

阿新 • • 發佈：2020-10-13

JavaScript可以說是互動之王，它作為指令碼語言加上許多Web Api進一步擴充套件了它的特性集，更加豐富介面互動的可操作性。這類API的例子包括WebGL API、Canvas API、DOM API，還有一組不太為人所知的cssAPI。

由於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 = ' color: rgb(136, 0, 0);">// 或者
el.setAttribute('style', ' color: rgb(85, 85, 85); font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Verdana, sans-serif; font-size: medium;">直接在.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"

電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com

實現

現在，咱們對 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)中還有更多方法，它們正等著被揭開神祕面紗。

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

內聯樣式

CSS 類

Stylesheets

實現

總結

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

打造 React.js App 的UI框架，你知道幾個

Linux下Shell日期的格式，你知道幾種？

五種方法建立java物件，你知道幾種呢？

Java 生成隨機數的 5 種方式，你知道幾種？

採集 Nginx 日誌的幾種方式，你知道幾種？

8種Python字串拼接的方法，你知道幾種？

3個Spring Boot核心註解，你知道幾個？

6種微服務RPC框架，你知道幾個？

4個影響快取命中率的因素，你知道幾個？

設計模式 | Spring中用到的設計模式，你知道幾個？

最常用的分散式ID解決方案，你知道幾個

10大經典資料分析模型，你知道幾個？

「乾貨」程式語言十大經典演算法，你知道幾個？

Java 效能優化的 9 個工具，你知道幾個？

Spring Boot 四大核心元件，你知道幾個？

SpringBoot啟用profiles你知道幾種方式？

面試官：手撕十大排序演算法，你會幾種？

PHP解決跨域問題，你常用哪種方法？

近50種語言編寫的“Hello, World”，你會幾種？可不要貪杯哦~

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

內聯樣式

CSS 類

Stylesheets

實現

總結

相關推薦