Dan*_*Lin 8 html 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页面,风格元素被清空后,其样式表规则仍然可以通过访问document.styleSheets[1].cssRules,而document.styleSheets[1].ownerNode.textContent为"".
另外,如果我通过运行脚本来修改样式元素document.styleSheets[1].ownerNode.textContent = "/*null*/",document.styleSheets[1].cssRules变为空并且重新呈现网页,就像我的捕获者所拥有的那样.
奇怪的行为令我感到困惑.我想知道为什么以及如何在清空样式元素后Reddit.com页面保留样式.任何信息表示赞赏.
可以通过编程方式插入、添加或修改<style>元素的 CSS 规则，如果未在元素上设置或附加 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 中以编程方式修改元素 :before CSS 规则
| 归档时间： |
|
| 查看次数： |
437 次 |
| 最近记录： |