I am trying to get a certain stylesheet from the head using javascript/jQuery. I do not want to use $('head').get(0).innerHTML or similar cause the head is filled up with more than 30 script and link elements.

I tried 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();

What can i do to get the stylesheet content from the head?

I am trying to get a certain stylesheet from the head using javascript/jQuery. I do not want to use $('head').get(0).innerHTML or similar cause the head is filled up with more than 30 script and link elements.

I tried 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();

What can i do to get the stylesheet content from the head?

• javascript
• jquery
• html

• Please post a snippet of HTML. – zzzzBov Commented Nov 23, 2011 at 15:01

5 Answers 5

The actual way to access the stylesheets in Javascript is to reference document.styleSheets. If you have Chrome, or Firefox with Firebug, you can type that into the Javascript console and see what's available inside it.

Here are some good references to look at.

• document.styleSheets - MDN
• JavaScript Kit- DOM StyleSheet Object

It is possible to get the content of a style sheet without relying on a GET request. A style sheet on a link element points to a JavaScript Object. The good news is that you can access that Object using document.styleSheets, or document.getElementById('link-tag-id').sheet.

If you're going to use the document.stylesheets, you will see a map with all of your link tags. So, the fastest way is to add an id (or another unique flag).

Now you can select the link tag using the following, and retrieve the sheet object

const sheet = document.getElementById('link-tag-id').sheet;

With the link tag sheet, you can extract the css using the following snippet:

const css = Array.from(sheet.cssRules).map(rule => rule.cssText).join(' ');

It will pass on each css rule of your style sheet returning the css text part of it and joining it in a "css" const.

If you want to make a test, you can paste the code below on your console of any webpage, it will output the content of the first style sheet on the head:

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

Try to request via ajax call:

var $my_stylesheet_url = $('head').find('link:first').attr('href');

var content;
$.get($my_stylesheet_url, function(data) {
    content = data;
    // do your staff here
});

Code: http://jsfiddle.net/kh2en/1/

If you're linking to stylesheets using <link /> elements, you'll need to make an AJAX request to read their contents. Additionally, this will only work for stylesheets on the same domain.

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

If you've added styles via the <style> element you can access the contents via .text().

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

Try this example... This will fetch the content of the first stylesheet

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