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。

JavaScript：操作StyleSheet的文本

1 个答案: