JavaScript:操作样式表的文本

Question

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

是否可以读取和写入样式表的整个文本？特别是，我想访问通过 link 标记附加的样式表。我通过搜索引擎没有找到任何内容，并且记录样式表的文章(例如 MDN 文章)似乎没有提及它。

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

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

谢谢

Answer 1

如果你捕获 <style> 就有可能使用某种查询方法而不是通过 document.styleSheets 访问它的元素.

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

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

<pre></pre>

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

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

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