Load different CSS files on button click with JavaScript

Question

I want to allow the user to change the 'theme' of the website when he clicks on theme 1 it loads a different CSS file then when the user clicks on theme 2. How is this possible?

This is what I have tierd to do with so far.

<script type="text/javascript">
    window.onload = function() {
        var fontButton = document.getElementById('changeFont');

        fontButton.addEventListener('click', function(){
            document.write('<link rel="stylesheet" type="text/css" href="/France2014/css/test.css">');
        });
    }
</script>

This loads the file when I click on the button, but it removes everything else inside the website and just leaves the HTML tag and CSS file, I know this because I launch the development tool inside of Google chrome.

What can I do? Is there a better way to implement this feature?I am open to suggestions.

Have you taken a look at http://stackoverflow.com/questions/17314797/change-theme-of-the-responsive-website-on-button-click — Tore, Sep 29 '14 at 13:28
i think you should change the `href` value just of stylesheet on every button click . — Tushar Raj, Sep 29 '14 at 13:30
avoid using document.write()! it rewrites everything on your page with whatever you put in the quotes. — Grapho, Sep 29 '14 at 13:47

Matheno · Accepted Answer · 2014-09-29T13:50:57.197

Changing a theme is usually done by loading in another class with JQuery. For example:

HTML:

<body id='skin' class="skin-blue">

JQuery:

$('#skin').addClass('skin-red').removeClass('skin-blue');

To change a font-size easily, consider something like this for example:

var size = 20;
    function setFontSize(s) {
        size = s;
        $('#sidebar-menu').css('font-size', '' + size + 'px');
        $('#content').css('font-size', '' + size + 'px');
    }
    function increaseFontSize() {
        setFontSize(size + 5);
    }
    function decreaseFontSize() {
        if(size > 5)
            setFontSize(size - 5);
    }

    $('#inc').click(increaseFontSize);
    $('#dec').click(decreaseFontSize);
    setFontSize(size);

and for example a + and - button

 <li class="dropdown tasks-menu">
   <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-fw fa-plus" id="inc"></i>
     </a>
   </li>
 </li>
 <li class="dropdown tasks-menu">
   <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-fw fa-minus" id="dec"></i>
     </a>
   </li>
</li>

Interesting, bascily what i want to do i just change the font size for certain divs. — Steve, Sep 29 '14 at 13:33
This is what i wanted. Thank you for yyour time kind sir! works perfectly. — Steve, Sep 29 '14 at 14:24

score 0 · Answer 2 · answered Sep 29 '14 at 13:29

0

i suggest you to add id or class onclick to <body> tag, You will have two sets of styles:

.menu{
color:black}

and after click you will add <body id="greenTheme">

#greenTheme .menu{
color:green}

answered Sep 29 '14 at 13:29

Paweł

409
3
13

score 0 · Answer 3 · answered Sep 29 '14 at 13:32

0

i think you should have to change just the href value of stylesheet on every button click .Doing that ,will load the new CSS file without affecting the DOM elements . Hope I am clear to you .

Thanks !!

answered Sep 29 '14 at 13:32

Tushar Raj

761
6
20

score 0 · Answer 4 · answered Sep 29 '14 at 13:33

I would try the following link as a quick working example...

enter link description here

You can see it in action here...

enter link description here

Even though your attempted solution is pure JavaScript and you might not actually need it I feel the need to mention jQuery. It should help you write less code that should be cross browser friendly too, it actually makes writing JavaScript less painful

score 0 · Answer 5 · answered Sep 29 '14 at 13:33

0

You can put a div before the link tag and use getElementById.innerHTML and change the contents to your desired css

answered Sep 29 '14 at 13:33

Dany Minassian

189
4
13

Load different CSS files on button click with JavaScript

5 Answers5