使用JS來動態(tài)操作css的幾種方法
JavaScript 可以說是交互之王，它作為腳本語言加上許多 Web Api 進一步擴展了它的特性集，更加豐富界面交互的可操作性。這類 API 的例子包括WebGL API、Canvas API、DOM API，還有一組不太為人所知的 CSS API。
由于JSX和無數(shù)JS框架的出現(xiàn)，使通過JS API與DOM交互的想法真正流行起來，但是在 CSS 中使用類似技術(shù)似乎并沒有很多。 當然，存在像CSS-in-JS這類解決方案，但是最流行的解決方案還是基于轉(zhuǎn)譯(transpilation)，無需額外運行即可生成 CSS。 這肯定對性能有好處，因為CSS API的使用可能導(dǎo)致額外的重繪，這與DOM API的使用一樣。 但這不是咱們想要的。 如果哪天公司要求咱們，既要操縱 DOM 元素的樣式和 CSS 類，還要像使用 HTML 一樣使用 JS 創(chuàng)建完整的樣式表，該怎么辦？
內(nèi)聯(lián)樣式
在咱們深入一些復(fù)雜的知識之前，先回來顧一下一些基礎(chǔ)知識。例如，咱們可以通過修改它的.style屬性來編輯給定的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對象上設(shè)置樣式屬性將需要使用駝峰式命名作為屬性鍵，而不是使用短橫線命名。 如果咱們需要設(shè)置更多的內(nèi)聯(lián)樣式屬性，則可以通過設(shè)置.style.cssText屬性，以更加高效的方式進行設(shè)置 。
請記住，給cssText設(shè)置后原先的css樣式被清掉了，因此，要求咱們一次死一堆樣式 。
如果這種設(shè)置內(nèi)聯(lián)樣式過于繁瑣，咱們還可以考慮將.style與Object.assign()一起使用，以一次設(shè)置多個樣式屬性。
// ...
Object.assign(el.style, {
backgroundColor: "red",
margin: "25px"
})
這些“基本知識”比咱們想象的要多得多。.style對象實現(xiàn)CSSStyleDeclaration接口。 這說明它帶還有一些有趣的屬性和方法，這包括剛剛使用的.cssText，還包括.length（設(shè)置屬性的數(shù)量），以及.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 類
接著，來看看更高級的結(jié)構(gòu)——CSS類，它在檢索和設(shè)置時具有字符串形式是.classname。
// ...
el.className = "class-one class-two";
el.setAttribute("class", "class-one class-two");
設(shè)置類字符串的另一種方法是設(shè)置class屬性（與檢索相同）。 但是，就像使用.style.cssText屬性一樣，設(shè)置.className將要求咱們在字符串中包括給定元素的所有類，包括已更改和未更改的類。
當然，可以使用一些簡單的字符串操作來完成這項工作，還有一種就是使用較新的.classList屬性，這個屬性，IE9 不支持它，而 IE10 和 IE11 僅部分支持它。
classlist屬性實現(xiàn)了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屬性實現(xiàn)。 document.styleSheets 只讀屬性，返回一個由 StyleSheet 對象組成的 StyleSheetList，每個 StyleSheet 對象都是一個文檔中鏈接或嵌入的樣式表。
for(styleSheet of document.styleSheets){
console.log(styleSheet);
}
通過打印結(jié)果咱們可以知道，每次循環(huán)打印的是 CSSStyleSheet 對象，每個 CSSStyleSheet 對象由下列屬性組成：
| 屬性 | 描述 |
|---|---|
| media | 獲取當前樣式作用的媒體。 |
| disabled | 打開或禁用一張樣式表。 |
| href | 返回 CSSStyleSheet 對象連接的樣式表地址。 |
| title | 返回 CSSStyleSheet 對象的title值。 |
| type | 返回 CSSStyleSheet 對象的type值，通常是text/css。 |
| parentStyleSheet | 返回包含了當前樣式表的那張樣式表。 |
| ownerNode | 返回CSSStyleSheet對象所在的DOM節(jié)點，通常是<link>或<style>。 |
| cssRules | 返回樣式表中所有的規(guī)則。 |
| ownerRule | 如果是通過@import導(dǎo)入的，屬性就是指向表示導(dǎo)入的規(guī)則的指針，否則值為null。IE不支持這個屬性。 |
CSSStyleSheet對象方法:
| 方法 | 描述 |
|---|---|
| insertRule() | 在當前樣式表的 cssRules 對象插入CSS規(guī)則。 |
| deleteRule() | 在當前樣式表刪除 cssRules 對象的CSS規(guī)則。 |
有了StyleSheetList的全部內(nèi)容，咱們來CSSStyleSheet本身。 在這里就有點意思了， CSSStyleSheet擴展了StyleSheet接口，并且只有這種只讀屬性，如.ownerNode，.href，.title或.type，它們大多直接從聲明給定樣式表的地方獲取?；叵胍幌录虞d外部CSS文件的標準HTML代碼，咱們就會明白這句話是啥意思：
<head> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" title="Styles"> </head>
現(xiàn)在，咱們知道HTML文檔可以包含多個樣式表，所有這些樣式表都可以包含不同的規(guī)則，甚至可以包含更多的樣式表(當使用@import時)。CSSStyleSheet有兩個方法:、.insertrule()和.deleterule() 來增加和刪除 Css 規(guī)則。
// ...
const ruleIndex = styleSheet.insertRule("div {background-color: red}");
styleSheet.deleteRule(ruleIndex);
.insertRule(rule,index):此函數(shù)可以在cssRules規(guī)則集合中插入一個指定的規(guī)則，參數(shù)rule是標示規(guī)則的字符串，參數(shù)index是值規(guī)則字符串插入的位置。
deleteRule(index):此函數(shù)可以刪除指定索引的規(guī)規(guī)則，參數(shù)index規(guī)定規(guī)則的索引。
CSSStyleSheet也有自己的兩個屬性：.ownerRule和.cssRule。雖然.ownerRule與@import相關(guān)，但比較有趣的是.cssRules 。簡單地說，它是CSSRuleList的CSSRule，可以使用前面提到的.insertrule()和.deleterule()方法修改它。請記住，有些瀏覽器可能會阻止咱們從不同的來源(域)訪問外部CSSStyleSheet的.cssRules屬性。
那么什么是 CSSRuleList？
CSSRuleList是一個數(shù)組對象包含著一個有序的CSSRule對象的集合。每一個CSSRule可以通過rules.item(index)的形式訪問, 或者rules[index]。 這里的rules是一個實現(xiàn)了CSSRuleList接口的對象， index是一個基于0開始的，順序與CSS樣式表中的順序是一致的。樣式對象的個數(shù)是通過rules.length表達。
對于CSSStyleRule對象:
每一個樣式表CSSStyleSheet對象可以包含若干CSSStyleRule對象，也就是css樣式規(guī)則，如下:
<style type="text/css">
h1{color:red}
div{color:green}
</style>
在上面的代碼中style標簽是一個CSSStyleSheet樣式表對象，這個樣式表對象包含兩個CSSStyleRule對象，也就是兩個css樣式規(guī)則。
CSSStyleRule對象具有下列屬性:
1.type:返回0-6的數(shù)字，表示規(guī)則的類型，類型列表如下:
0：CSSRule.UNKNOWN_RULE。
1：CSSRule.STYLE_RULE （定義一個CSSStyleRule對象）。
2：CSSRule.CHARSET_RULE （定義一個CSSCharsetRule對象，用于設(shè)定當前樣式表的字符集，默認與當前網(wǎng)頁相同）。
3：CSSRule.IMPORT_RULE （定義一個CSSImportRule對象，就是用@import引入其他的樣式表）
4：CSSRule.MEDIA_RULE （定義一個CSSMediaRule對象，用于設(shè)定此樣式是用于顯示器，打印機還是投影機等等）。
5：CSSRule.FONT_FACE_RULE （定義一個CSSFontFaceRule對象，CSS3的@font-face）。
6：CSSRule.PAGE_RULE （定義一個CSSPageRule對象）。
2.cssText:返回一個字符串，表示的是當前規(guī)則的內(nèi)容，例如:
div{color:green}
3.parentStyleSheet:返回所在的CSSStyleRule對象。
4.parentRule:如果規(guī)則位于另一規(guī)則中，該屬性引用另一個CSSRule對象。
5.selectorText:返回此規(guī)則的選擇器，如上面的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"
實現(xiàn)
現(xiàn)在，咱們對 CSS 相關(guān)的 JS Api有了足夠的了解，可以創(chuàng)建咱們自己的、小型的、基于運行時的CSS-in-JS實現(xiàn)。咱們的想法是創(chuàng)建一個函數(shù)，它傳遞一個簡單的樣式配置對象，生成一個新創(chuàng)建的CSS類的哈希名稱供以后使用。
實現(xiàn)流程很簡單，咱們需要一個能夠訪問某種樣式表的函數(shù)，并且只需使用.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模塊系統(tǒng)，則可以在函數(shù)外部安全地創(chuàng)建樣式表實例，而不必擔心其他人對其進行訪問。 但是，為了演示例，咱們將stylesheet上的.CSSInJS屬性設(shè)置為標志的形式，通過標志來判斷是否要使用它。
現(xiàn)在，如果如果還需要創(chuàng)建一個新的樣式表怎么辦？ 最好的選擇是創(chuàng)建一個新的<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字符串的形式。 這包括駝峰命名和短橫線全名之間的轉(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>
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);
運行效果：
總結(jié)
正如本文咱們所看到的，使用 JS 操作CSS 是一件非常有趣的事，咱們可以挖掘很多好用的 API,上面的例子只是冰山一角，在CSS API(或者更確切地說是API)中還有更多方法，它們正等著被揭開神秘面紗。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實只需要一半就行了2012-03-03
js簡單實現(xiàn)調(diào)整網(wǎng)頁字體大小的方法
這篇文章主要介紹了js簡單實現(xiàn)調(diào)整網(wǎng)頁字體大小的方法,通過javascript動態(tài)修改頁面元素樣式實現(xiàn)調(diào)整網(wǎng)頁字體的功能,非常簡單實用,需要的朋友可以參考下2016-07-07
JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法,結(jié)合實例形式分析了javascript函數(shù)式編程中組合函數(shù)的概念、原理、用法及操作注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了JavaScript SHA512加密算法代碼，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
微信小程序 高德地圖路線規(guī)劃實現(xiàn)過程詳解
這篇文章主要介紹了微信小程序 路線規(guī)劃實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
關(guān)于原生js中bind函數(shù)的簡單實現(xiàn)
下面小編就為大家?guī)硪黄P(guān)于原生js中bind函數(shù)的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js獲取當前頁的URL與window.location.href簡單方法
下面小編就為大家?guī)硪黄猨s獲取當前頁的URL與window.location.href簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文主要分享了在jQuery之焦點圖轉(zhuǎn)換-左右的基礎(chǔ)上，將jQuery代碼改成js原生，并添加定時器（setInterval()和clearInterval()）的實例代碼。需要的朋友可以參考借鑒2016-12-12
今天小編就為大家分享一篇在layui下對元素進行事件綁定的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS計算兩個數(shù)組的交集、差集、并集、補集（多種實現(xiàn)方式）
本文通過多種實現(xiàn)方式給大家介紹了JS計算兩個數(shù)組的交集、差集、并集、補集 的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05