0

How do I host a StyleSheet on my own website and use that StyleSheet to style elements on another website using JavaScript along with getting all the CSS Rules from my StyleSheet into an array of some sort? When I try to alert out the rules I get nothing.

My code so far:

var d = document;
var cssId = 'test';
var allRules = [];

if (!d.getElementById(cssId))
{
    var head  = d.getElementsByTagName("head")[0];
    var link  = d.createElement("link");
    link.id   = cssId;
    link.rel  = "stylesheet";
    link.type = "text/css";
    link.href = "http://consolution.dk/d12/Daniel/test.css";
    link.media = "all";
    head.appendChild(link);

    var rules = link.cssRules;

    for(var i = 0; i < rules.length; i++)
    {
        allRules.push(rules[i].selectorText);
        alert(allRules[i]);
    }
}
user3246019
  • 1

2 Answers2

1

As far as I know, <link> elements do not have a cssRules property; that is instead found on a CSSStyleSheet object, found in document.styleSheets.

Potentially bad news is, it looks like Cross-Site policies apply and the cssRules value is null (see this fiddle)

PixnBits
  • 1,150
  • 10
  • 14
  • Thank you for your response! I guess creating a style element instead wouldn't change anything. I've actually tried something with some YQL statements to get it out aswell but since I've only worked with JavaScript for a couple of weeks it's way to advanced for me to get to work. – user3246019 Jan 28 '14 at 20:39
  • updated with fiddle link, also: best of luck on your JS journey! IMNotSoHO JS is a **great** language, have fun!! – PixnBits Jan 28 '14 at 20:51
0

After some messing with the code around I found a solution.

var d = document;
var cssId = 'test';
var allRules = [];

if (!d.getElementById(cssId))
{

    var head  = d.getElementsByTagName("head")[0];
    var link  = d.createElement("link");
    link.id   = cssId;
    link.rel  = "stylesheet";
    link.type = "text/css";
    // link.href = "http://consolution.dk/d12/Daniel/test.css";
    link.href = "test.css";
    link.media = "all";
    head.appendChild(link);

    setTimeout(function() {

        var rules = document.styleSheets[document.styleSheets.length-1].cssRules;

        for(var i = 0; i < rules.length; i++)
        {
            allRules.push(rules[i].selectorText);
            alert(allRules[i]);
        }
    }, 2000);

}
  • First, you can't access the stylesheet right away, I put a 2 second timeout (but you can probably put less).
  • I used document.styleSheets[document.styleSheets.length-1] to get the "last" styesheet that was loaded.
  • And it doesn't work if the stylesheet is on a different domain.

I only got it to work on Firefox, but I hope it gives you a lead to continue.

Skwal
  • 2,160
  • 2
  • 20
  • 30
  • Thank you for your response! This definitely is a big help for me, but my final goal is to being able to take the rules from my hosted StyleSheet in case I add more rules to it the script will automatically know about all the rules when it gets loaded. Is there no kind of getting around this so it's possible to get the rules from a StyleSheet hosted on my own website? It just seems weird to me you can load a StyleSheet from a different website but not get the rules out, since it takes a minute to just open that specific StyleSheet in your browser and see it for yourself. Thank you! – user3246019 Jan 28 '14 at 20:36
  • After reading a bit [here](http://stackoverflow.com/questions/5323604/firefox-not-able-to-enumerate-document-stylesheets-cssrules), there seems to be a solution if you set the "crossorigin" attribute on you `` to signal the browser that the CSS file is trusted. But I have to admit that I'm surprised how complicated it is. – Skwal Jan 28 '14 at 20:43
  • "Cross-site scripting carried out on websites accounted for roughly 84% of all security vulnerabilities" [Wow.](http://en.wikipedia.org/wiki/Cross-site_scripting) Sadly, there are reasons for making things so hard/specific. :'( – PixnBits Jan 28 '14 at 20:55
  • 1
    @PixnBits Yes you're absolutely right! I just thought it would be easier to get access to style that is loaded on the page anyway. – Skwal Jan 28 '14 at 20:58
  • It kinda looks like a hopeless task in the end to try and get working, but I've tried to create a .htaccess file in my websites root containing Header set Access-Control-Allow-Origin "*" And adding link.crossOrigin = "anonymous"; to the JavaScript but still nothing. Any ideas? – user3246019 Jan 28 '14 at 21:13