从head获取样式表内容

get stylesheet content from head

本文关键字：样式 head 获取      更新时间：2023-09-26

我试图使用javascript/jQuery从头部获得一定的样式表。我不想使用$('head').get(0).innerHTML或类似的，因为头部填充了超过30个脚本和链接元素。

I try this so far

// that's the one
var $my_stylesheet = $(document.body.previousSibling).find('link:last');
//those did not work (result: "")
$my_stylesheet.get(0).innerHTML;
$my_stylesheet.text();
$my_stylesheet.html();

我怎么做才能从头部获得样式表内容?

在Javascript中访问样式表的实际方法是引用document.styleSheets。如果你有Chrome，或者Firebug的Firefox，你可以在Javascript控制台输入这句话，看看里面有什么可用的。

这里有一些很好的参考资料。

  • 文档。样式表- MDN
  • JavaScript Kit- DOM样式表对象

尝试通过ajax调用请求:

var $my_stylesheet_url = $('head').find('link:first').attr('href');
var content;
$.get($my_stylesheet_url, function(data) {
    content = data;
    // do your staff here
});

代码:http://jsfiddle.net/kh2en/1/

不依赖get请求也可以获取样式表的内容。链接元素上的样式表指向一个JavaScript对象。好消息是，您可以使用document访问该Object。或document.getElementById('link-tag-id').sheet.

如果你要使用文档。样式表中，您将看到一个包含所有链接标记的映射。所以，最快的方法是添加一个id(或另一个唯一的标志)。

现在您可以使用下面的代码选择链接标记，并检索工作表对象 
const sheet = document.getElementById('link-tag-id').sheet;
对于链接标签表，您可以使用以下代码片段提取css: 
const css = Array.from(sheet.cssRules).map(rule => rule.cssText).join(' ');

它将传递样式表的每个css规则，返回它的css文本部分并将其连接到"css"const中。

如果你想做一个测试，你可以将下面的代码粘贴到任何网页的控制台，它将在头部输出第一个样式表的内容:

const sheet = document.styleSheets[0];
const css = Array.from(sheet.cssRules).map(rule => rule.cssText).join(' ');
console.log(css);

如果使用<link />元素链接样式表，则需要发出AJAX请求来读取其内容。另外，这只适用于同一域中的样式表。

$('link[rel="stylesheet"]').each(function (i, ele) {
  $.get($(this).attr('href'), function (data) {
    console.log(data);
  });
});

如果你通过<style>元素添加了样式，你可以通过.text()访问内容。

$('style').each(function (i, ele) {
  console.log($(this).text());
});

试试这个例子…这将获取第一个样式表

的内容
$.ajax({
    'url': $(document).find('link')[0].href,
    'dataType':'text',
    'success':function(data){
        alert(data);
        }
});
相关文章：