How can you change the attached CSS file with Javascript?

Question

I was wondering, is it possible to change the attached stylesheet using JavaScript?

For example:

<link href="stylesheet.css" rel="stylesheet" type="text/css">
.....
<div id="controls">
    <div id="red" onClick="styler(1)">R</div>
    <div id="green" onClick="styler(2)">G</div>
    <div id="blue" onClick="styler(3)">B</div>
    <div id="reset" onClick="styler(4)">Reset</div>
</div>

JavaScript

function styler(attr){
    switch(attr){
         case'1':document.----- = "stylesheet1.css";break;
         case'2':document.----- = "stylesheet2.css";break;
         case'3':document.----- = "stylesheet3.css";break;
         case'4':document.----- = "stylesheet.css";break;
         default:;break;
     }
}

There is an API that allows you to modify lines in stylesheets, but you really don't want to. CSS is expressive enough. — Halcyon
– Halcyon, Commented Jun 6, 2014 at 16:52

Community · Accepted Answer · 2017-05-23 10:29:24Z

7

Add an id to the link tag and use

<link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    function styler(attr){
        var href;
        switch(attr){
            case'1':href = "stylesheet1.css";break;
            case'2':href = "stylesheet2.css";break;
            case'3':href = "stylesheet3.css";break;
            case'4':href = "stylesheet.css";break;
            default:;break;
        }
        document.getElementById('myStyleSheet').href = href;
    }
</script>

See this post

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jun 6, 2014 at 16:58

Preston S

2,80126 silver badges38 bronze badges

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

Comments

felipsmartins · Accepted Answer · 2014-06-06 17:06:13Z

0

It should be easy:

<html>
<head>
    <link rel="stylesheet" href="/tmp/default.css" id="default">
</head>

<body>
<button id="bt">change style</button>

<script>
    var targetStyle = document.querySelector('#default'),
        otherStyle = '/tmp/style2.css';

    document.querySelector('#bt').onclick = function(){
        targetStyle.href=otherStyle;        
    };

</script>

</body>
</html>

answered Jun 6, 2014 at 17:06

felipsmartins

13.6k4 gold badges51 silver badges58 bronze badges

2 Comments

Preston S Over a year ago

Don't use querySelector when only selecting by id, its much slower than getElementById. jsPerf test

felipsmartins Over a year ago

@PrestonS It depends! Moreover this is just an example, it can fetch element nodes through their own methods. Frankly, downvote so it's just sick!

Mohit maru · Accepted Answer · 2017-01-02 13:48:30Z

0

Try it

 <!DOCTYPE html>
    <html>
    <head>
    <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
    <script>
    function swapStyleSheet(sheet){
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
    </script>
    </head>
    <body>
    <h2>Javascript Change StyleSheet Without Page Reload</h2>
    <button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
    <button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
    <button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
    </body>
    </html>

answered Jan 2, 2017 at 13:48

Mohit maru

8238 silver badges15 bronze badges

Comments

emersonthis · Accepted Answer · 2017-01-19 19:58:20Z

0

Another option is to toggle the disabled property of the link DOM element. According to Mozilla the disabled HTML attribute is non-standard, but the javascript property is. So if you're toggling it with JS you should be fine.

answered Jan 19, 2017 at 19:58

emersonthis

33.6k62 gold badges224 silver badges385 bronze badges

Collectives™ on Stack Overflow

How can you change the attached CSS file with Javascript?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related