Using jQuery or plain JavaScript, can I return a list of every stylesheet included in a page when it initially loads?

All I want to do is print out a list of stylesheet names into the console, no additional info on the stylesheets is required.

Using jQuery or plain JavaScript, can I return a list of every stylesheet included in a page when it initially loads?

All I want to do is print out a list of stylesheet names into the console, no additional info on the stylesheets is required.

• javascript
• jquery

• querySelectorAll('link[rel=stylesheet]') – adeneo Commented Jan 7, 2016 at 12:24
• 3 I wonder why you added a bounty Looking for an answer drawing from credible and/or official sources., what are your intents if i may ask? – Clemens Himmer Commented Jan 12, 2016 at 15:24
• are you looking for the names of the stylesheet files or is it for their individual style rules? – xmoex Commented Jan 19, 2016 at 8:52

6 Answers 6

If I am correct, by Names you mean the file name of each stylesheet.

Consider this example:

jQuery("link[href*='.css']").each(function(){
    console.log(jQuery(this).attr('href').split('/').pop());
});

Here I am using this link[href*='.css'] selector to select all (include the inactive) stylesheets.

if using jQuery:

console.log($('link[rel=stylesheet]'));

If you're using jQuery, you could do something along the lines of:

$(document).ready(function() {
    console.log($("link[rel='stylesheet']").attr("href"));
});

https://jsfiddle/vzfhjg16/

This piece of code collects all links with the rel attribute on stylesheet, then iterates over them and logs their attribute href. You can use the line in the loop to display the stylesheet names anywhere you want to.

$("head link[rel='stylesheet']").each(function (){
    console.log($(this).attr("href"));
});

Working example

try this,

var styles = document.styleSheets;
$(styles).each(function(index,value){
    console.log(value.href==null ? null : value.href.split('/').pop())
});

var styleSheetList = document.styleSheets;

ref: https://developer.mozilla/en-US/docs/Web/API/Document/styleSheets