时间戳

首页 > 解决方案 > 具有有效 CSS 规则的空样式元素？

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

问题描述

我正在开发一个网页捕获器，发现从 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].cssRuleswhile访问document.styleSheets[1].ownerNode.textContent其样式表规则""。

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

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

标签： javascripthtmlcss

解决方案

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

<!DOCTYPE html>
<html>
  <head>
    <style id="style"></style>
  </head>
  <body>
    <div>abc</div>
    <p>123</p>
    <script>
      const style = document.querySelector("#style");
      const {sheet} = style;
      sheet.insertRule("div{color:blue}", 0);
      sheet.addRule("p", "color:green", 1);
      console.log(style.textContent);
      style.textContent = "";
      console.assert(style.textContent.length > 0, [style.textContent]); // assertion failed
      console.log(style.textContent === ""); // true
    </script>
  </body>

</html>

另见修改元素：在 React 中以编程方式在 CSS 规则之前

推荐阅读