JavaScript:操作StyleSheet文本

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。