How to load Different css every time onload

Question

I am trying to add some css.But i want it to change it every time the page load(obviously I will specify what to load on different times)

For example sometimes I want to load

<style>
    html, body, a, a:hover {
        cursor:url(&#39;
        http://www.edwdwed.com/cursowedwedrsfolder/Tredwedwedwedolll-face.png&#39;
        ), auto !important;
    }
</style>

and sometimes I want to load

<style>
    html, body, a, a:hover {
        cursor:url(&#39;
        http://www.snazzyspace.com/cursorsfolder/MEgusta.png&#39;
        ), auto !important;
    }
</style>

I found a way to randomise content after surfing,but that works only on images and not scripts/CSS.

Use class names do this.

Travis J
– Travis J

2012-12-30 09:13:25 +00:00
Commented Dec 30, 2012 at 9:13 — Travis J
– Travis J, Commented Dec 30, 2012 at 9:13
@Jan Dvorak: if only it was a separated css file

zerkms
– zerkms

2012-12-30 09:20:26 +00:00
Commented Dec 30, 2012 at 9:20 — zerkms
– zerkms, Commented Dec 30, 2012 at 9:20

Community · Accepted Answer · 2017-05-23 12:18:46Z

1

Working code... it randomly sets a background color on each page load...

function setCSS(selector, attribute, value) {
    var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
    found = false;

    for (var S = 0; S < document.styleSheets.length; S++){
        if(document.styleSheets[S][cssRuleCode]){
            for(var n = 0; n < document.styleSheets[S][cssRuleCode].length; n++) {

                if(document.styleSheets[S][cssRuleCode][n]["selectorText"] == selector) {
                    if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                        document.styleSheets[S][cssRuleCode][n].style[attribute] = value;
                        found = true;
                        break;
                    }
                }


            }
        }

    }

    if(!found) {
        // Let's add
        for (var S = 0; S < document.styleSheets.length; S++){
            try {
                document.styleSheets[S].insertRule(selector + ' { ' + attribute + ': ' + value + '; }',document.styleSheets[S][cssRules].length);
                break;
            } catch(err){
                try {
                    document.styleSheets[S].addRule(selector, attribute + ': ' + value + ';');
                    break;
                } catch (err){}
            }
        }
    }
}

window.onload = function(){
    urls = ["url('http://www.iwdownload.com/image/1982.png'), auto !important;",
        "url('http://www.iwdownload.com/image/13534.gif'), auto !important;"];
    var rand = Math.floor((Math.random() * urls.length));
    setCSS("html, body, a, a:hover", "cursor", urls[rand]);
};

Ref: Changing CSS Values with Javascript

Update

To set background color of body to blue, use

setCSS("body", "background", "blue");

**Update 2 : Blogger **

For blogger, copy paste the following just before </head> in the blogger template HTML. Then reload your blog, the background should change to a random color.

&lt;script type=&quot;text/javascript&quot;&gt;

    function setCSS(selector, attribute, value) {
        var cssRuleCode = document.all ? &#39;rules&#39; : &#39;cssRules&#39;; //account for IE and FF
        for (var S = 0; S &lt; document.styleSheets.length; S++){
            if(document.styleSheets[S][cssRuleCode]){
                for(var n = 0; n &lt; document.styleSheets[S][cssRuleCode].length; n++) {
                    if(document.styleSheets[S][cssRuleCode][n][&quot;selectorText&quot;].indexOf(selector) != -1) {
                        if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                            document.styleSheets[S][cssRuleCode][n].style[attribute] = value;

                            break;
                        }
                    }
                }
            }

        }
    }

    window.onload = function(){
        colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, &quot;yellow&quot;, &quot;orange&quot;, &quot;white&quot;];
        var rand = Math.floor((Math.random() * colors.length));
        setCSS(&quot;body&quot;, &quot;background&quot;, colors[rand]);
    };

&lt;/script&gt;

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Dec 30, 2012 at 9:25

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

Rahul Shah Over a year ago

Sir,i tried putting the 1st code,i got an error in blogger "The content of elements must consist of well-formed character data or markup." So,i tried in notepad and the code isn;t working.here is the code which i applied(it is a mere copy paste of the above code) img.ctrlv.in/50e01c99b1c7c.jpg

ATOzTOA Over a year ago

If you need this in blogger, then you will have to HTML encode the whole code, all '<' should become < and so on...

Rahul Shah Over a year ago

after encoding the error is gone,but there is no output, I tried the basic background code at jsfiddle and it is not working too :(

ATOzTOA Over a year ago

Are you adding the JavaScript to the blogger post or the HTML template?

ATOzTOA Over a year ago

The code matches exactly "html, body, a, a:hover", do you have that CSS entry. Otherwise, just replace it with just "body" and see if it works.

|

Mateusz Rogulski · Accepted Answer · 2012-12-30 09:26:33Z

1

I suggest you to prepare your css with differets class for <body> tag for example:

CSS

body.style1{...}
body.style2{...}
...

And manipulate this with javascript

JS

var rand = Math.floor((Math.random()*NumberOfYourStyle)+1);
var style = "style" + rand;
document.getElementsByTagName('body')[0].className+=style;

Working example

answered Dec 30, 2012 at 9:26

Mateusz Rogulski

7,4638 gold badges47 silver badges63 bronze badges

4 Comments

Mateusz Rogulski Over a year ago

webdesign.about.com/od/css101classes/a/bl_cssclass1_5a.htm here you have some example of how to prepare basic css stylesheet. But I strongly suggest you to use css in separated file and linked in in your website.

Rahul Shah Over a year ago

The jsfiddle example helped a lot.Sir,thank you so very much for this code. but i am facing a minor issue in implementing it.i want this css code to randomise,but i am failing in putting the code properly. i want to have this css code to randomise (screenshot:img.ctrlv.in/50e015eb4c7cd.jpg .So while putting the code you put it in jsfiddle i re-arranged the code in this way(screenshot:img.ctrlv.in/50e01667cb637.jpg can you plz tell me where i am going wrong.

ATOzTOA Over a year ago

What if the OP needs to have a 100 random URLs? This is a non-standard approach.

Mateusz Rogulski Over a year ago

@ATOzTOA then you should create 100 classes, there aren't better solution, this is optimal resolve for me.

Sergiu Dumitriu · Accepted Answer · 2012-12-30 09:26:40Z

0

You could use a templating engine to generate CSS dynamically.

For example, instead of plain CSS, use Velocity, which is a very simple template engine.

Or, if you're more likely to have support for PHP on the server, use PHP to generate CSS code instead of HTML (yes, PHP can do that).

Or, use CSSOM to manipulate the CSS clientside, using JavaScript.

answered Dec 30, 2012 at 9:26

Sergiu Dumitriu

11.7k3 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

How to load Different css every time onload

3 Answers 3

21 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

21 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related