代码之家 › 专栏 › 技术社区 › Danny Lin

使用CSS规则的空样式元素?

css html javascript

Danny Lin · 技术社区 · 7 年前

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

<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页面,在清空样式元素之后,仍然可以通过 document.styleSheets[1].cssRules ,而 document.styleSheets[1].ownerNode.textContent "" .

另外,如果我通过运行 document.styleSheets[1].ownerNode.textContent = "/*null*/" 文档.样式表[1].cssRules 变成空的,网页被重新呈现,就像我的抓捕者得到的一样。

我被这种奇怪的行为弄糊涂了。我想知道为什么以及如何在清空样式元素后保留Reddit.com页面的样式。如有任何信息,敬请垂询。

0 回复 | 直到 7 年前

guest271314 7 年前

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

<!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>

另见 Modify element :before CSS rules programmatically in React

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前