我知道可以使用document.styleSheets
获取附加样式表的集合。我还知道可以在样式表中使用单独的规则。
是否可以读取和写入样式表的整个文本?特别是,我想访问通过 link
标记附加的样式表。我通过搜索引擎没有找到任何内容,并且记录样式表的文章(例如 MDN 文章)似乎没有提及它。
我想使用JavaScript来动态替换样式表的一些内容,实现一个稍微动态的样式表。
(即使我必须自己完成跨浏览器工作,我也更喜欢没有 jQuery 的解决方案。幸运的是,IE8 不是问题😃)。
谢谢
最佳答案
如果你捕获 <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:操作样式表的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34780256/