Javascript 空样式元素与工作CSS规则？_Javascript_Html_Css

Javascript 空样式元素与工作CSS规则？

javascript html css

Javascript 空样式元素与工作CSS规则？,javascript,html,css,Javascript,Html,Css,我正在开发一个网页捕获器，发现从Reddit.com捕获的网页的一些样式表规则丢失了经过进一步调查，我发现Reddit.com页面的源HTML代码有一个样式元素，如下所示： <style type="text/css" data-styled-components="..." data-styled-components-is-local="true">...</style> 。。。启用JavaScript后，脚本将处理样式元素并将其清空： <style t

我正在开发一个网页捕获器，发现从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规则可以通过编程方式插入、添加或修改，如果
元素的.textContent
未在
元素上设置CSS文本，则返回空字符串”



abc
123
const style=document.querySelector（“风格”）；
const{sheet}=样式；
sheet.insertRule（“div{color:blue}”，0）；
添加规则（“p”，“颜色：绿色”，1）；
console.log（style.textContent）；
style.textContent=“”；
assert（style.textContent.length>0，[style.textContent]）；//断言失败
console.log（style.textContent==“”）；//真的
也可以从MDN中签出：
<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>


使用CSSOM修改样式表规则
身体{
背景色：红色；
}
var stylesheet=document.styleSheets[0]；
stylesheet.cssRules[0]。style.backgroundColor=“蓝色”；
主体背景颜色的样式表声明通过JavaScript修改。
“但是，对于Reddit.com页面，在清空样式元素后，仍然可以通过document.styleSheets[1].cssRules来访问其样式表规则。如果您能够获得CSS规则，问题是什么？1。我的捕获器依赖于原始样式表文本，而不是document.styleSheets，由于SOP的原因，其他来源的样式表文件无法访问document.styleSheets。2.这个问题不仅是关于我的捕获者的问题，也是为什么样式元素内容和实际文档样式表会存在这种不一致的原因。什么是“原始样式表”？我不确定是什么问题。如何再现结果？您是否询问过网站的作者，为什么代码会以您描述的方式执行？行样式表文本是样式元素的文本内容或外部或导入样式表的检索文件文本。您可以在Reddit.com中打开一个页面，例如并从控制台运行document.styleSheets[1].cssRules
和document.styleSheets[1].ownerNode.textContent
，查看是否存在此问题。仍然不了解问题所在document.styleSheets[1].cssRules
列出样式表
，document.styleSheets[1]的规则。ownerNode.outerHTML
是，文档.样式表[1]。ownerNode.sheet
引用样式表
。由于
元素中不存在CSS文本，您是否希望不存在cssRules
。我不知道使用insertRule
类似的脚本更改样式与DOM更改不对应，这与使用.style.
更改元素样式不同。有趣的是，css是根据styleElement.sheet.cssRules[0]中的规则重建的，但它并没有连接到styleElement.textContent
。这个api非常容易误导，因为el.textContent=el.textContent将实际删除所有样式。