jQuery click event style sheet changing not working

jQuery click event style sheet changing not working.I am trying to change the style sheet using jQuery, The style sheet is changing but style sheet properties are not working. How can I solve this issue.

$(document).ready(function() {
$(".theme1").click(function() {
$("#switch").attr({href : "theme1.css"});
});
});

Answers 1

  • Try this:

    $('#toggleStyle').click(function (){
       $('link[href="style.css"]').attr('href','styleNew.css');
    });
    

    jsFiddle

    just if you want to keep new style if user do a reload, you should set a cookie to keep user setting.


    Multi CSS with select option:

    $('#ChangeStyle').change(function (){
        var val = $(this).val();
       $('link[rel="stylesheet"]').attr('href',val+'.css');
    });
    

    Html:

    <select id="ChangeStyle">
      <option value="Style1">Style 1</option>
      <option value="Style2">Style 2</option>
      <option value="Style3">Style 3</option>
    </select>
    

    Multi CSS with buttons:

    $('.toggleStyle').each(function (){
    $(this).click(function (){
        var rel = $(this).attr('rel');
       $('link[rel="stylesheet"]').attr('href',rel+'.css');
    });
    });
    

    Html:

    <a class="toggleStyle" rel="Style1">Style 1</a>
    <a class="toggleStyle" rel="Style2">Style 2</a>
    <a class="toggleStyle" rel="Style3">Style 3</a>
    <a class="toggleStyle" rel="Style4">Style 4</a>
    <a class="toggleStyle" rel="Style5">Style 5</a>
    

Related Articles