admin管理员组

文章数量:1415145

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.

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.

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Sep 30, 2014 at 9:43 Tasos K. 8,0977 gold badges42 silver badges65 bronze badges asked Sep 29, 2014 at 13:24 SteveSteve 1,2115 gold badges16 silver badges29 bronze badges 3
  • Have you taken a look at stackoverflow./questions/17314797/… – Tore Commented Sep 29, 2014 at 13:28
  • i think you should change the href value just of stylesheet on every button click . – collab-with-tushar-raj Commented Sep 29, 2014 at 13:30
  • avoid using document.write()! it rewrites everything on your page with whatever you put in the quotes. – Grapho Commented Sep 29, 2014 at 13:47
Add a ment  | 

5 Answers 5

Reset to default 3

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>

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 !!

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}

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

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

本文标签： jqueryLoad different CSS files on button click with JavaScriptStack Overflow

版权声明：本文标题：jquery - Load different CSS files on button click with JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745209352a2647790.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。