使用JS來(lái)動(dòng)態(tài)操作css的幾種方法
JavaScript 可以說(shuō)是交互之王,它作為腳本語(yǔ)言加上許多 Web Api 進(jìn)一步擴(kuò)展了它的特性集,更加豐富界面交互的可操作性。這類 API 的例子包括WebGL API、Canvas API、DOM API,還有一組不太為人所知的 CSS API。
由于JSX和無(wú)數(shù)JS框架的出現(xiàn),使通過(guò)JS API與DOM交互的想法真正流行起來(lái),但是在 CSS 中使用類似技術(shù)似乎并沒(méi)有很多。 當(dāng)然,存在像CSS-in-JS這類解決方案,但是最流行的解決方案還是基于轉(zhuǎn)譯(transpilation),無(wú)需額外運(yùn)行即可生成 CSS。 這肯定對(duì)性能有好處,因?yàn)镃SS API的使用可能導(dǎo)致額外的重繪,這與DOM API的使用一樣。 但這不是咱們想要的。 如果哪天公司要求咱們,既要操縱 DOM 元素的樣式和 CSS 類,還要像使用 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è)置樣式屬性將需要使用駝峰式命名作為屬性鍵,而不是使用短橫線命名。 如果咱們需要設(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()之類的方法:
// ... 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è)小竅門-在遍歷過(guò)程中.item()方法具有按索引訪問(wèn)形式的備用語(yǔ)法。
// ... el.style.item(0) === el.style[0]; // true
CSS 類
接著,來(lái)看看更高級(jí)的結(jié)構(gòu)——CSS類,它在檢索和設(shè)置時(shí)具有字符串形式是.classname。
// ... el.className = "class-one class-two"; el.setAttribute("class", "class-one class-two");
設(shè)置類字符串的另一種方法是設(shè)置class屬性(與檢索相同)。 但是,就像使用.style.cssText屬性一樣,設(shè)置.className將要求咱們?cè)谧址邪ńo定元素的所有類,包括已更改和未更改的類。
當(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 類集合,而其他的,例如.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ì)明白這句話是啥意思:
<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)源(域)訪問(wèn)外部CSSStyleSheet的.cssRules屬性。
那么什么是 CSSRuleList?
CSSRuleList是一個(gè)數(shù)組對(duì)象包含著一個(gè)有序的CSSRule對(duì)象的集合。每一個(gè)CSSRule可以通過(guò)rules.item(index)的形式訪問(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ī)則的類型,類型列表如下:
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類的哈希名稱供以后使用。
實(shí)現(xiàn)流程很簡(jiǎn)單,咱們需要一個(gè)能夠訪問(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或任何其他類型的JS模塊系統(tǒng),則可以在函數(shù)外部安全地創(chuàng)建樣式表實(shí)例,而不必?fù)?dān)心其他人對(duì)其進(jìn)行訪問(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)行訪問(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("")}}`; }
除了上面的小竅門之外。 自然,咱們首先需要一種為CSS類生成新的隨機(jī)名稱的方法。 然后,將樣式對(duì)象正確地表達(dá)為可行的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);
運(yùn)行效果:
總結(jié)
正如本文咱們所看到的,使用 JS 操作CSS 是一件非常有趣的事,咱們可以挖掘很多好用的 API,上面的例子只是冰山一角,在CSS API(或者更確切地說(shuō)是API)中還有更多方法,它們正等著被揭開(kāi)神秘面紗。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript淡入淡出效果的實(shí)現(xiàn)思路
這個(gè)思路是最近寫XScroll.js類的時(shí)候想明白的。平常我們說(shuō)的淡入淡出效果,一般分成兩部分,一半是淡入,另一半就是淡出了。不過(guò)經(jīng)過(guò)分析,我覺(jué)得其實(shí)只需要一半就行了2012-03-03js簡(jiǎn)單實(shí)現(xiàn)調(diào)整網(wǎng)頁(yè)字體大小的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)調(diào)整網(wǎng)頁(yè)字體大小的方法,通過(guò)javascript動(dòng)態(tài)修改頁(yè)面元素樣式實(shí)現(xiàn)調(diào)整網(wǎng)頁(yè)字體的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-07-07JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中組合函數(shù)的概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05微信小程序 高德地圖路線規(guī)劃實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了微信小程序 路線規(guī)劃實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08關(guān)于原生js中bind函數(shù)的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇關(guān)于原生js中bind函數(shù)的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上,將jQuery代碼改成js原生,并添加定時(shí)器(setInterval()和clearInterval())的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12在layui下對(duì)元素進(jìn)行事件綁定的實(shí)例
今天小編就為大家分享一篇在layui下對(duì)元素進(jìn)行事件綁定的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集(多種實(shí)現(xiàn)方式)
本文通過(guò)多種實(shí)現(xiàn)方式給大家介紹了JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集 的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05