使用JS來(lái)動(dòng)態(tài)操作css的幾種方法

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

JavaScript 可以說(shuō)是交互之王，它作為腳本語(yǔ)言加上許多 Web Api 進(jìn)一步擴(kuò)展了它的特性集，更加豐富界面交互的可操作性。這類(lèi) API 的例子包括WebGL API、Canvas API、DOM API，還有一組不太為人所知的 CSS API。

由于JSX和無(wú)數(shù)JS框架的出現(xiàn)，使通過(guò)JS API與DOM交互的想法真正流行起來(lái)，但是在 CSS 中使用類(lèi)似技術(shù)似乎并沒(méi)有很多。當(dāng)然，存在像CSS-in-JS這類(lèi)解決方案，但是最流行的解決方案還是基于轉(zhuǎn)譯(transpilation)，無(wú)需額外運(yùn)行即可生成 CSS。這肯定對(duì)性能有好處，因?yàn)镃SS API的使用可能導(dǎo)致額外的重繪，這與DOM API的使用一樣。但這不是咱們想要的。如果哪天公司要求咱們，既要操縱 DOM 元素的樣式和 CSS 類(lèi)，還要像使用 HTML 一樣使用 JS 創(chuàng)建完整的樣式表，該怎么辦？

內(nèi)聯(lián)樣式

在咱們深入一些復(fù)雜的知識(shí)之前，先回來(lái)顧一下一些基礎(chǔ)知識(shí)。例如，咱們可以通過(guò)修改它的.style屬性來(lái)編輯給定的HTMLElement的內(nèi)聯(lián)樣式。

const el = document.createElement('div')

el.style.backgroundColor = 'red'
// 或者 
el.style.cssText = 'background-color: red'
// 或者
el.setAttribute('style', 'background-color: red')

直接在.style對(duì)象上設(shè)置樣式屬性將需要使用駝峰式命名作為屬性鍵，而不是使用短橫線(xiàn)命名。如果咱們需要設(shè)置更多的內(nèi)聯(lián)樣式屬性，則可以通過(guò)設(shè)置.style.cssText屬性，以更加高效的方式進(jìn)行設(shè)置。

請(qǐng)記住，給cssText設(shè)置后原先的css樣式被清掉了，因此，要求咱們一次死一堆樣式。

如果這種設(shè)置內(nèi)聯(lián)樣式過(guò)于繁瑣，咱們還可以考慮將.style與Object.assign()一起使用，以一次設(shè)置多個(gè)樣式屬性。

// ...
Object.assign(el.style, {
 backgroundColor: "red",
 margin: "25px"
})

這些“基本知識(shí)”比咱們想象的要多得多。.style對(duì)象實(shí)現(xiàn)CSSStyleDeclaration接口。這說(shuō)明它帶還有一些有趣的屬性和方法，這包括剛剛使用的.cssText，還包括.length（設(shè)置屬性的數(shù)量），以及.item()、.getPropertyValue()和.setPropertyValue()之類(lèi)的方法：

// ...
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()
 }
}

這里有個(gè)小竅門(mén)-在遍歷過(guò)程中.item()方法具有按索引訪(fǎng)問(wèn)形式的備用語(yǔ)法。

// ...
el.style.item(0) === el.style[0]; // true

CSS 類(lèi)

接著，來(lái)看看更高級(jí)的結(jié)構(gòu)——CSS類(lèi)，它在檢索和設(shè)置時(shí)具有字符串形式是.classname。

// ...
el.className = "class-one class-two";
el.setAttribute("class", "class-one class-two");

設(shè)置類(lèi)字符串的另一種方法是設(shè)置class屬性（與檢索相同）。但是，就像使用.style.cssText屬性一樣，設(shè)置.className將要求咱們?cè)谧址邪ńo定元素的所有類(lèi)，包括已更改和未更改的類(lèi)。

當(dāng)然，可以使用一些簡(jiǎn)單的字符串操作來(lái)完成這項(xiàng)工作，還有一種就是使用較新的.classList屬性，這個(gè)屬性，IE9 不支持它，而 IE10 和 IE11 僅部分支持它。

classlist屬性實(shí)現(xiàn)了DOMTokenList，有一大堆有用的方法。例如.add()、.remove()、.toggle()和.replace()允許咱們更改當(dāng)前的 CSS 類(lèi)集合，而其他的，例如.item()、.entries()或.foreach()則可以簡(jiǎn)化這個(gè)索引集合的遍歷過(guò)程。

// ...
const classNames = ["class-one", "class-two", "class-three"];
classNames.forEach(className => {
 if(!el.classList.contains(className)) {
  el.classList.add(className);
 }
});

Stylesheets

一直以來(lái)，Web Api 還有一個(gè)StyleSheetList接口，該接口由document.styleSheets屬性實(shí)現(xiàn)。 document.styleSheets 只讀屬性，返回一個(gè)由 StyleSheet 對(duì)象組成的 StyleSheetList，每個(gè) StyleSheet 對(duì)象都是一個(gè)文檔中鏈接或嵌入的樣式表。

for(styleSheet of document.styleSheets){
 console.log(styleSheet);
}

通過(guò)打印結(jié)果咱們可以知道，每次循環(huán)打印的是 CSSStyleSheet 對(duì)象，每個(gè) CSSStyleSheet 對(duì)象由下列屬性組成：

屬性	描述
media	獲取當(dāng)前樣式作用的媒體。
disabled	打開(kāi)或禁用一張樣式表。
href	返回 CSSStyleSheet 對(duì)象連接的樣式表地址。
title	返回 CSSStyleSheet 對(duì)象的title值。
type	返回 CSSStyleSheet 對(duì)象的type值，通常是text/css。
parentStyleSheet	返回包含了當(dāng)前樣式表的那張樣式表。
ownerNode	返回CSSStyleSheet對(duì)象所在的DOM節(jié)點(diǎn)，通常是<link>或<style>。
cssRules	返回樣式表中所有的規(guī)則。
ownerRule	如果是通過(guò)@import導(dǎo)入的，屬性就是指向表示導(dǎo)入的規(guī)則的指針，否則值為null。IE不支持這個(gè)屬性。

CSSStyleSheet對(duì)象方法:

方法	描述
insertRule()	在當(dāng)前樣式表的 cssRules 對(duì)象插入CSS規(guī)則。
deleteRule()	在當(dāng)前樣式表刪除 cssRules 對(duì)象的CSS規(guī)則。

有了StyleSheetList的全部?jī)?nèi)容，咱們來(lái)CSSStyleSheet本身。在這里就有點(diǎn)意思了， CSSStyleSheet擴(kuò)展了StyleSheet接口，并且只有這種只讀屬性，如.ownerNode，.href，.title或.type，它們大多直接從聲明給定樣式表的地方獲取?；叵胍幌录虞d外部CSS文件的標(biāo)準(zhǔn)HTML代碼，咱們就會(huì)明白這句話(huà)是啥意思：

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

現(xiàn)在，咱們知道HTML文檔可以包含多個(gè)樣式表，所有這些樣式表都可以包含不同的規(guī)則，甚至可以包含更多的樣式表(當(dāng)使用@import時(shí))。CSSStyleSheet有兩個(gè)方法:、.insertrule()和.deleterule() 來(lái)增加和刪除 Css 規(guī)則。

// ...
const ruleIndex = styleSheet.insertRule("div {background-color: red}");
styleSheet.deleteRule(ruleIndex);

.insertRule(rule,index):此函數(shù)可以在cssRules規(guī)則集合中插入一個(gè)指定的規(guī)則，參數(shù)rule是標(biāo)示規(guī)則的字符串，參數(shù)index是值規(guī)則字符串插入的位置。

deleteRule(index):此函數(shù)可以刪除指定索引的規(guī)規(guī)則，參數(shù)index規(guī)定規(guī)則的索引。

CSSStyleSheet也有自己的兩個(gè)屬性：.ownerRule和.cssRule。雖然.ownerRule與@import相關(guān)，但比較有趣的是.cssRules 。簡(jiǎn)單地說(shuō)，它是CSSRuleList的CSSRule，可以使用前面提到的.insertrule()和.deleterule()方法修改它。請(qǐng)記住，有些瀏覽器可能會(huì)阻止咱們從不同的來(lái)源(域)訪(fǎng)問(wèn)外部CSSStyleSheet的.cssRules屬性。

那么什么是 CSSRuleList？

CSSRuleList是一個(gè)數(shù)組對(duì)象包含著一個(gè)有序的CSSRule對(duì)象的集合。每一個(gè)CSSRule可以通過(guò)rules.item(index)的形式訪(fǎng)問(wèn), 或者rules[index]。這里的rules是一個(gè)實(shí)現(xiàn)了CSSRuleList接口的對(duì)象， index是一個(gè)基于0開(kāi)始的，順序與CSS樣式表中的順序是一致的。樣式對(duì)象的個(gè)數(shù)是通過(guò)rules.length表達(dá)。

對(duì)于CSSStyleRule對(duì)象:

每一個(gè)樣式表CSSStyleSheet對(duì)象可以包含若干CSSStyleRule對(duì)象，也就是css樣式規(guī)則，如下:

<style type="text/css">
 h1{color:red}
 div{color:green}
</style>

在上面的代碼中style標(biāo)簽是一個(gè)CSSStyleSheet樣式表對(duì)象，這個(gè)樣式表對(duì)象包含兩個(gè)CSSStyleRule對(duì)象，也就是兩個(gè)css樣式規(guī)則。

CSSStyleRule對(duì)象具有下列屬性:

1.type:返回0-6的數(shù)字，表示規(guī)則的類(lèi)型，類(lèi)型列表如下:

0：CSSRule.UNKNOWN_RULE。

1：CSSRule.STYLE_RULE （定義一個(gè)CSSStyleRule對(duì)象）。

2：CSSRule.CHARSET_RULE （定義一個(gè)CSSCharsetRule對(duì)象，用于設(shè)定當(dāng)前樣式表的字符集，默認(rèn)與當(dāng)前網(wǎng)頁(yè)相同）。

3：CSSRule.IMPORT_RULE （定義一個(gè)CSSImportRule對(duì)象，就是用@import引入其他的樣式表）

4：CSSRule.MEDIA_RULE （定義一個(gè)CSSMediaRule對(duì)象，用于設(shè)定此樣式是用于顯示器，打印機(jī)還是投影機(jī)等等）。

5：CSSRule.FONT_FACE_RULE （定義一個(gè)CSSFontFaceRule對(duì)象，CSS3的@font-face）。

6：CSSRule.PAGE_RULE （定義一個(gè)CSSPageRule對(duì)象）。

2.cssText:返回一個(gè)字符串，表示的是當(dāng)前規(guī)則的內(nèi)容，例如:

div{color:green}

3.parentStyleSheet:返回所在的CSSStyleRule對(duì)象。

4.parentRule:如果規(guī)則位于另一規(guī)則中，該屬性引用另一個(gè)CSSRule對(duì)象。

5.selectorText:返回此規(guī)則的選擇器，如上面的div就是選擇器。

6.style:返回一個(gè)CSSStyleDeclaration對(duì)象。

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

rule.selectorText; // "div"
rule.style.backgroundColor; // "red"

實(shí)現(xiàn)

現(xiàn)在，咱們對(duì) CSS 相關(guān)的 JS Api有了足夠的了解，可以創(chuàng)建咱們自己的、小型的、基于運(yùn)行時(shí)的CSS-in-JS實(shí)現(xiàn)。咱們的想法是創(chuàng)建一個(gè)函數(shù)，它傳遞一個(gè)簡(jiǎn)單的樣式配置對(duì)象，生成一個(gè)新創(chuàng)建的CSS類(lèi)的哈希名稱(chēng)供以后使用。

實(shí)現(xiàn)流程很簡(jiǎn)單，咱們需要一個(gè)能夠訪(fǎng)問(wèn)某種樣式表的函數(shù)，并且只需使用.insertrule()方法和樣式配置就可以運(yùn)行了。先從樣式表部分開(kāi)始：

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或任何其他類(lèi)型的JS模塊系統(tǒng)，則可以在函數(shù)外部安全地創(chuàng)建樣式表實(shí)例，而不必?fù)?dān)心其他人對(duì)其進(jìn)行訪(fǎng)問(wèn)。但是，為了演示例，咱們將stylesheet上的.CSSInJS屬性設(shè)置為標(biāo)志的形式，通過(guò)標(biāo)志來(lái)判斷是否要使用它。

現(xiàn)在，如果如果還需要?jiǎng)?chuàng)建一個(gè)新的樣式表怎么辦？最好的選擇是創(chuàng)建一個(gè)新的<style/>標(biāo)記，并將其附加到HTML文檔的<head/>上。這會(huì)自動(dòng)將新樣式表添加到document.styleSheets列表，并允許咱們通過(guò)<style/>標(biāo)記的.sheet屬性對(duì)其進(jìn)行訪(fǎng)問(wèn)，是不是很機(jī)智？

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

除了上面的小竅門(mén)之外。自然，咱們首先需要一種為CSS類(lèi)生成新的隨機(jī)名稱(chēng)的方法。然后，將樣式對(duì)象正確地表達(dá)為可行的CSS字符串的形式。這包括駝峰命名和短橫線(xiàn)全名之間的轉(zhuǎn)換，以及可選的像素單位（px）轉(zhuǎn)換的處理。

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

運(yùn)行效果：

總結(jié)

正如本文咱們所看到的，使用 JS 操作CSS 是一件非常有趣的事，咱們可以挖掘很多好用的 API,上面的例子只是冰山一角，在CSS API(或者更確切地說(shuō)是API)中還有更多方法，它們正等著被揭開(kāi)神秘面紗。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)

欄目：JavaScript

下一篇：Echarts實(shí)現(xiàn)單條折線(xiàn)可拖拽效果

本文標(biāo)題：使用JS來(lái)動(dòng)態(tài)操作css的幾種方法

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9475.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

使用JS來(lái)動(dòng)態(tài)操作css的幾種方法

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀