Switch CSS file on button click

Question

I want to switch CSS of the page by clicking a button in asp.net, but somehow can't do that. My code as follows:

HTML:

<div>
    <h1>My Website</h1>
    <br/>
    <button>Night Mode</button>
    <button>Day Mode</button>
    </div>

Script:

<script>
        $(function () {
            $('button').click(function () {

               $('link').attr('href', 'Styles/night.css');
            });

        });
    </script>

Header:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <link  href="Styles/day.css" rel="stylesheet" type="text/css" />

I have 2 css files in Styles folder as day.css and night.css. The page is using day.css and should switch to night.css on clicking of any button.

If I put the .html file and both .css files in a folder, it actually works. But in Visual Studio (i.e aspx page), it's not happening. I tried other jQuery code like alert, it works fine. i can improve my code after that by using toggle etc.

Muhammad Ramzan · Accepted Answer · 2012-02-19 23:04:30Z

2

Got the answer from Dave Ward. All i had to do is include preventDefault() method. To ovveride the default behavior of form.

answered Feb 19, 2012 at 23:04

Muhammad Ramzan

2411 gold badge3 silver badges6 bronze badges

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

Comments

sachin · Accepted Answer · 2017-02-06 15:58:51Z

As per your requirement this snippet will helps you.

Follow these steps:

you have to create two css files in same location.

1: Day.css

2: Night.css

After that use this code for switch css files.

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link href="Day.css" id="styles" rel="stylesheet" type="text/css" />

</head>
<script>
$(document).ready(function(){
$('#mode').click(function(){
if($('link#styles').attr('href')=="Day.css"){
$('#mode').attr('value','Switch To Day Mode')
$('link#styles').attr('href','Night.css')
}
else
{
$('#mode').attr('value','Switch To Night Mode')
$('link#styles').attr('href','Day.css')
}
})

});
</script>
<div class="table-responsive container">
<input type=button id="mode" text="Switch Mode" class="btn btn-primary" value="Switch To Night Mode" >  </div>
  </html>

Hadi Mostafapour · Accepted Answer · 2012-02-16 12:28:53Z

0

add an id attr to link and try to remove link then append new link to that

var newstyle = $("#style").clone().attr("link","newstyle.css");
$("#style").remove().after(newstyle);

answered Feb 16, 2012 at 12:28

Hadi Mostafapour

2,3162 gold badges15 silver badges22 bronze badges

1 Comment

Muhammad Ramzan Over a year ago

i added an id to link as 'style' and modified code as follows: var newstyle = $("#style").clone().attr("link", "Styles/night.css"); $("#style").remove().after(newstyle); still didnt work sir.

Collectives™ on Stack Overflow

Switch CSS file on button click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related