Question

我正在开发网页捕获器，发现从Reddit.com捕获的网页的某些样式表规则丢失了。

进一步调查后，我发现Reddit.com页面的源HTML代码具有如下样式元素：

<style type="text/css" data-styled-components="..." data-styled-components-is-local="true">...</style>

启用JavaScript后，样式元素将由脚本处理并清空：

<style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style>

这就是为什么我的捕获器无法获取样式表的原因。

通过脚本更改样式元素的内容时，页面的文档样式表通常会相应地更改，并且页面将重新呈现以反映更改。

但是，对于Reddit.com页面，清空style元素后，仍然可以通过document.styleSheets[1].cssRules访问其样式表规则，而document.styleSheets[1].ownerNode.textContent是""。

此外，如果我通过运行类似document.styleSheets[1].ownerNode.textContent = "/*null*/"的脚本来修改样式元素，则document.styleSheets[1].cssRules将变为空，并且将重新渲染网页，就像捕获器所捕获的一样。

我对这种奇怪的行为感到困惑。我想知道在清空样式元素后，为什么以及如何Reddit.com页面保留样式。任何信息表示赞赏。

Answer 1

可以以编程方式插入，添加或修改<style>元素sheet的CSS规则，其中.textContent元素的<style>返回空字符串{{1} }，如果CSS文本未设置在""元素上或未附加到该元素。

<style>

另请参阅Modify element :before CSS rules programmatically in React

Answer 2

另请查看 MDN 中的 Modify a stylesheet rule with CSSOM example：

<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
  body {
   background-color: red;
  }
</style>
<script type="text/javascript">
  var stylesheet = document.styleSheets[0];
  stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
</head>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>

空样式元素具有有效的CSS规则？

2 个答案: