Question

我正在尝试使用javascript / jQuery从头部获取某个样式表。我不想使用$('head').get(0).innerHTML或类似的原因，因为头部充满了超过30个脚本和链接元素。

到目前为止我试过这个

// 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();

如何从头部获取样式表内容？

Answer 1

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

以下是一些很好的参考资料。

Answer 2

尝试通过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/

Answer 3

如果您使用<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());
});

Answer 4

可以在不依赖GET请求的情况下获取样式表的内容。链接元素上的样式表指向JavaScript对象。好消息是您可以使用document.styleSheets或document.getElementById（'link-tag-id'）。sheet访问该对象。

如果您要使用document.stylesheets，将看到包含所有链接标签的地图。因此，最快的方法是添加一个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 sheet = document.styleSheets[0];
const css = Array.from(sheet.cssRules).map(rule => rule.cssText).join(' ');
console.log(css);

Answer 5

试试这个例子......这将获取第一个样式表的内容

$.ajax({
    'url': $(document).find('link')[0].href,
    'dataType':'text',
    'success':function(data){
        alert(data);
        }
});

从头部获取样式表内容

5 个答案: