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.