通过 document.styleSheets 修改 css

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

来自MDN docs（约DocumentOrShadowRoot.styleSheets）：

This is an experimental technology.

Check the Browser compatibility table carefully before using this in production.

Expect behavior to change in the future.

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

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

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

how can I modify CSS different way?

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

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

那么你可以这样做：

myEl.style.fontSize = "1rem";

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

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

但是，这些并不是 return 像 id 选择器那样的单个元素。例如，获取特定 class 的第一个元素：

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

第四个是：

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

Answer 3

直接修改样式表可能很棘手。

我更喜欢将新的 style 元素附加到文档并将修改后的 CSS 放在其中。由于它是文档中的最后一个样式元素，它将覆盖任何具有匹配选择器的早期 CSS 规则。

例如，这会将正文的字体大小设置为 1rem:

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

Answer 4

当我上次处理这个问题时，许多浏览器对 CSSOM 的支持不是很好（我认为这还没有改变）。

如果要将样式应用于单个元素，请直接在元素上进行。

如果您想在运行时生成 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 5

您将使用 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>

通过 document.styleSheets 修改 css

Modifying of css by document.styleSheets

javascript

css

mobile-chrome