JavaScript：操作样式表的文本答案

【问题标题】：JavaScript: Manipulating text of StyleSheetJavaScript：操作样式表的文本
【发布时间】：2016-01-14 01:36:31
【问题描述】：

我知道可以使用document.styleSheets 获取附加样式表的集合。我也知道可以在样式表中使用单独的规则。

是否可以读取和写入样式表的整个文本？特别是，我想访问通过link 标签附加的样式表。我通过搜索引擎一无所获，文档样式表的文章（如 MDN 文章）似乎没有提及它。

我想使用 JavaScript 动态替换样式表的一些内容，实现稍微动态的样式表。

（即使我必须自己完成跨浏览器的工作，我更喜欢没有 jQuery 的解决方案。幸运的是，IE8 不是问题？？？？）。

谢谢

【问题讨论】：

davidwalsh.name/add-rules-stylesheets rickardnilsson.net/post/…stackoverflow.com/questions/1720320/…
@artm 所有这些地址都在制作新的样式表或添加/删除规则。 OP 想要获取现有样式表的全部文本内容。
我想使用 JavaScript 动态替换样式表的一些内容，实现稍微动态的样式表。 如果您告诉我，几乎总有更好的方法我们您要完成的工作。
@torazaburo 我真正想要做的是为不兼容的变量实现 CSS 变量。这可以通过将var(--something) 的所有实例替换为之前声明的值来完成。在这个阶段我不知道浏览器是否会响应 CSS 文本的变化。它还允许我实现某种颜色主题，再次通过用设定值替换模式。
@Manngo 您是否考虑过使用 CSS 预处理器，例如 Less 或 Sass？

标签： javascript dom stylesheet

【解决方案1】：

如果您使用某种查询方法而不是通过document.styleSheets 访问它来获取<style> 元素，这是可能的。

var pre = document.querySelector('pre');
var styleSheet = document.querySelector('style');
pre.innerText = styleSheet.innerText;

/* Voila! */
#test {
    position: fixed;
 }

&lt;pre&gt;&lt;/pre&gt;

要访问外部样式表的内容，唯一的方法是使用 AJAX。假设您可以访问 jQuery 的 $.ajax 函数，它看起来像这样：

var styleSheet = document.querySelector('style');
$.ajax({
  url: styleSheet.href,
  success: function(contentsOfStyleSheet) {
    // do stuff
  }
});

这将使您能够访问内容，但您将无法以这种方式直接操作页面的内容。更改外部 CSS 文件规则的唯一方法是通过您提到的 document.styleSheets API。

【讨论】：

这仅适用于实际页面上的样式块。我想知道附加到页面的样式表似乎不是 DOM 的一部分。我已编辑问题以使其更清楚。
这只有在 CSS 文件托管在同一台服务器上时才有效。
@torazaburo 没关系。请参阅我上面的评论，了解我为什么要这样做。