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

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

由于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屬性，以更加高效的方式進行設置。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

請記住，給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"

實現

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

原文：https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/

JavaScript中，動態創建是一種創建DOM元素的方式。它允許開發人員在運行時動態地創建和操作HTML元素。

動態創建的優點是它能夠根據運行時情況動態地生成HTML元素，從而提高了代碼的可維性和可擴展性。

動態創建的應用廣泛，包括在用戶界面中創建交互式元素、在AJAX應用中動態加載數據等方面。

動態創建的技術包括createElement()、appendChild()、innerHTML等方法。這些方法允許開發人員在運行時動態地創建和操作DOM元素。

動態創建的應用也包括事件處理、動畫效果等，它們能夠使得用戶界面更加動態和響應式。

例如，在JavaScript中，動態創建是一種創建DOM元素的方式。它允許開發人員在運行時動態地生成和操作HTML元素，從而提高了代碼的可維性和可擴展性。

態網頁制作技術是一種利用腳本語言、數據庫和服務器端程序來生成動態內容的網頁技術。以下是常用的動態網頁制作技術：

1.PHP：PHP是一種廣泛使用的服務器端腳本語言，可以嵌入到HTML中，用于生成動態網頁內容。它可以與各種數據庫進行交互，實現動態數據查詢和處理。

2. ASP.NET：ASP.NET是微軟開發的一種服務器端網頁開發框架，使用C#或VB.NET等編程語言編寫。它提供了強大的數據處理功能和訪問數據庫的能力。

3. JavaScript：JavaScript是一種在瀏覽器端執行的腳本語言，可以使網頁實現動態效果和交互。通過DOM操作和AJAX技術，可以實現與服務器的數據交互和更新。

4. AJAX：AJAX（Asynchronous JavaScript and XML）是一種利用JavaScript和XML進行異步數據交互的技術。它可以在不刷新整個網頁的情況下，實現部分頁面的數據更新和交換。

5. JSP：JSP（JavaServer Pages）是一種用于創建動態網頁的Java技術。它使用類似HTML的標記語言，通過嵌入Java代碼來生成動態內容。\n\n6. Python Django：Python Django是一種基于Python的開發框架，用于快速開發高質量的Web應用程序。它提供了強大的數據庫操作和模板引擎，能夠生成高度動態的網頁內容。

這些技術可以通過服務器端和客戶端的協作，生成動態內容并提供給用戶，使網頁具有交互性和實時更新的能力。

在線咨詢

上一篇：JavaWeb實現文件上傳與下載
下一篇：css3美化網頁-第五章

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

您的項目需求