假設你有一個段落。
<p id="target">rainbow 🌈</p>你需要用JS改變它的顏色。你有什麼選擇？
1. 內聯樣式
最直接的路徑。從 DOM 查詢元素並變更其內聯樣式。
document.getElementById('target').style.color = 'tomato';
簡短而簡單。
2. 全域樣式
另一種選擇是建立 <style> 標籤，用 CSS 規則填充它並將標籤附加到 DOM。
var style = document.createElement('style');
style.innerHTML = `
#target {
color: blueviolet;
}
`;
document.head.appendChild(style);
3. CSSOM 插入規則
第三種選擇鮮為人知。我們將使用 CSSStyleSheet insertRule 方法。
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#target {color: darkseagreen}');雖然它可能看起來與第二個選項相似，但它絕對不同。
正如您在 Chrome 開發工具中看到的那樣，“<style>”標籤為空，但樣式（深海綠顏色）已應用於該元素。此外，顏色無法透過開發工具更改，因為 Chrome 不允許編輯動態 CSS 樣式。
其實這樣的行為才是寫這篇文章的動機。由於性能原因，流行的 CSS-in-JS 庫 Styled Components 使用此功能在生產模式下注入樣式。在特定專案或環境中，此功能可能不受歡迎，有些人在專案問題中抱怨它。
4.可建構樣式表（2019 年 7 月更新）
現在可以從 JavaScript 建立 CSSStyleSheet 物件。
// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');
// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];更多詳細資訊請參閱此處。
此選項僅對 Chrome 有效，因此請謹慎使用。
您知道使用 javascript 新增樣式的其他選項嗎？這些天你的首選選擇是什麼？
謝謝閱讀！
原文出處：https://dev.to/karataev/set-css-styles-with-javascript-3nl5
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章