时间戳

首页 > 解决方案 > 通过 document.styleSheets 修改 css

javascript - 通过 document.styleSheets 修改 css

问题描述

我尝试通过更改来修改 CSS：

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

它在 PC 上运行完美，但使用移动浏览器（至少 chrome 和 mozilla）触发此脚本无效。

我做错什么了？如果由于某种原因这种修改 CSS 的方式不受全球支持，我该如何修改 CSS 不同的方式？

编辑：我想更改所有现有和所有未来动态添加的具有精确类的对象的样式。所以el.style.fontSize不是很好的选择。

标签： javascriptcssmobile-chrome

解决方案

来自MDN 文档（关于DocumentOrShadowRoot.styleSheets）：

这是一项实验技术。

在生产中使用它之前，请仔细检查浏览器兼容性表。

期望行为在未来发生变化。

因此，我建议不要使用该方法。

但是，我无法更详细地解释为什么您会看到您描述的问题，因为大多数浏览器都应该在链接的兼容性表中支持此功能。

现在回答你的下一个问题：

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

我总是先通过 DOM 获取元素，然后直接将样式应用于元素。例如：

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

然后你可以这样做：

myEl.style.fontSize = "1rem";

如果您不想通过其id属性来定位元素，您可以使用其他几种方法：

  1. getElementsByClassName()– 采用类名的字符串值，例如。"myClass"
  2. getElementsByTagName()– 采用标签名称的字符串值，例如。"body","div"
  3. querySelector()– 采用 CSS 选择器的字符串值，例如。"div.myClass p"

但是，它们不会像选择器那样返回单个元素id。例如，要获取特定类的第一个元素：

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

第四个是：

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

推荐阅读