通过 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