通過 document.styleSheets 修改 css

Question

我嘗試通過更改來修改 CSS：

document.styleSheets[0].cssRules[0].style.fontSize = '1rem';

它在 PC 上運行完美，但使用移動瀏覽器（至少 chrome 和 mozilla）觸發此腳本無效。

我做錯了什么？ 如果 CSS 的這種修改方式由於某種原因不受全球支持，我該如何修改 CSS 不同的方式？

編輯：我想用精確的 class 更改所有現有和所有未來動態添加的對象的樣式。 所以el.style.fontSize不是很好的選擇。

Answer 1

來自MDN 文檔（關於DocumentOrShadowRoot.styleSheets ）：

這是一項實驗技術。

在生產中使用它之前，請仔細檢查瀏覽器兼容性表。

期望行為在未來發生變化。

因此，我建議不要使用該方法。

但是，我無法更詳細地解釋為什么您會看到您描述的問題，因為大多數瀏覽器都應該在鏈接的兼容性表中支持此功能。

現在回答你的下一個問題：

如何以不同的方式修改 CSS？

我總是先通過 DOM 獲取一個元素，然后將 styles 直接應用於一個元素。 例如：

var myEl = document.getElementById("myId");

然后你可以這樣做：

myEl.style.fontSize = "1rem";

如果您不想通過其id屬性來定位元素，您可以使用其他幾種方法：

getElementsByClassName() – 采用 class 名稱的字符串值，例如。 "myClass"
getElementsByTagName() – 獲取標簽名稱的字符串值，例如。 "body" ， "div"
querySelector() – 采用 CSS 選擇器的字符串值，例如。 "div.myClass p"

但是，它們不會像id選擇器那樣返回單個元素。 例如，要獲取特定 class 的第一個元素：

var myEl = document.getElementsByClassName("myClass")[0];

第四個是：

var myEl = document.getElementsByClassName("myClass")[3];

Answer 2

直接修改 styleSheets 可能很棘手。

我更喜歡 append 文檔的新style元素，並將修改后的 CSS 放在那里。 由於它是文檔中的最后一個樣式元素，因此它將覆蓋任何具有匹配選擇器的早期 CSS 規則。

例如，這會將正文的字體大小設置為 1rem：

let style = document.createElement('style');
style.innerHTML = 'body { font-size: 1rem; }';
document.head.appendChild(style);

Answer 3

當我上次處理這種操作時，許多瀏覽器都不太支持 CSSOM（我認為這還沒有改變）。

如果您想將 styles 應用於單個元素，請直接在元素上執行。

如果您想在運行時生成 css 規則，您還可以考慮將樣式標簽放入文檔中：

var style = document.createElement('style');

// set style properties
// append the style tag to the head or somewhere in the body

head.appendChild(style);

Answer 4

使用 css 變量您將擁有更多控制權，您可以在下面找到一個小演示來說明我的觀點

 let root = document.documentElement; document.querySelector('button').addEventListener('click', () => { let currentVal = Number(getComputedStyle(root).getPropertyValue('--defaultFontSize').replace('px', '')); root.style.setProperty('--defaultFontSize', `${currentVal + 5}px`); });

 :root { --defaultFontSize: 20px; }.text { font-size: var(--defaultFontSize); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p class="text">Some text</p> <button>Increse font size</button> </body> </html>

Answer 5

如果您有任何要修改的類名或 id，則可以使用 jquery css() 方法。

例如： $("#whateverID").css('font-size', '1rem');

通過 document.styleSheets 修改 css

問題描述

5 個解決方案

解決方案1
0 2020-05-28 16:05:36

解決方案2
0 已采納 2020-05-28 16:13:41

解決方案3
0 2020-05-28 16:14:26

解決方案4
0 2020-05-28 16:17:10

解決方案5
-1 2020-05-28 16:03:51

通過 document.styleSheets 修改 css

問題描述

5 個解決方案

解決方案1 0 2020-05-28 16:05:36

解決方案2 0 已采納 2020-05-28 16:13:41

解決方案3 0 2020-05-28 16:14:26

解決方案4 0 2020-05-28 16:17:10

解決方案5 -1 2020-05-28 16:03:51

解決方案1
0 2020-05-28 16:05:36

解決方案2
0 已采納 2020-05-28 16:13:41

解決方案3
0 2020-05-28 16:14:26

解決方案4
0 2020-05-28 16:17:10

解決方案5
-1 2020-05-28 16:03:51