gpt4 book ai didi

javascript - 具有工作 CSS 规则的空样式元素?

转载 作者:太空狗 更新时间:2023-10-29 14:21:48 24 4
gpt4 key购买 nike

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

经过进一步调查,我发现 Reddit.com 页面的源 HTML 代码有这样一个样式元素:

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

当JavaScript开启时,style元素被脚本处理并被清空:

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

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

当样式元素的内容被脚本更改时,页面的文档样式表通常会相应更改,页面将重新呈现以反射(reflect)更改。

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

此外,如果我通过运行像 document.styleSheets[1].ownerNode.textContent = "/*null*/" 这样的脚本来修改样式元素,document.styleSheets[1 ].cssRules 变为空,网页重新呈现,就像我的捕获器得到的一样。

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

最佳答案

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

另见 Modify element :before CSS rules programmatically in React

关于javascript - 具有工作 CSS 规则的空样式元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54850845/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com