Today in this blog, I would like to write about how to change theme in website. This very simple task.
The below mention line of code will change css in the page.
$('#styleTheme[rel=stylesheet]').attr('href', 'newTheme.css');
I am also including a prototype code which helps to understand it's uses. Before jumping in the code. I would recommend to create 4 css file in your folder. Name those css file as :
css1.css
p { color:black; }
css2.css
p { color:red; }
css3.css
p { color:green; }
cssdefault.css
p{color:blue;}
Create a html file index.html. now download jQuery file and put it in your local directory. Here is the contents for index.html file
<html>
<head>
<style></style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="cssdefault.css" media="screen" type="text/css" id="styleTheme">
<script>
$(document).ready(function () {
$("#theme").change(function(){
var styleTheme = this.value + ".css";
$('#styleTheme[rel=stylesheet]').attr('href', styleTheme);
});
});
</script>
</head>
<body>
<p class="themePara"><b>Note:</b> This section of text will change color on changing theme of the page.</p>
<form action="">
Theme <select id="theme" name="theme">
<option value="">Select a Theme</option>
<option value="css1">CSS 1</option>
<option value="css2">Css 2</option>
<option value="css3">Css 3</option>
</select>
</form>
</body>
</html>
This file consists of <p> html tag and <select> tag. on change event is attached with select by jQuery. Inside onchange event corresponding css theme is choosen.
I hope this will give you idea on how to change theme in a html page.
The below mention line of code will change css in the page.
$('#styleTheme[rel=stylesheet]').attr('href', 'newTheme.css');
I am also including a prototype code which helps to understand it's uses. Before jumping in the code. I would recommend to create 4 css file in your folder. Name those css file as :
css1.css
p { color:black; }
css2.css
p { color:red; }
css3.css
p { color:green; }
cssdefault.css
p{color:blue;}
Create a html file index.html. now download jQuery file and put it in your local directory. Here is the contents for index.html file
<html>
<head>
<style></style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="cssdefault.css" media="screen" type="text/css" id="styleTheme">
<script>
$(document).ready(function () {
$("#theme").change(function(){
var styleTheme = this.value + ".css";
$('#styleTheme[rel=stylesheet]').attr('href', styleTheme);
});
});
</script>
</head>
<body>
<p class="themePara"><b>Note:</b> This section of text will change color on changing theme of the page.</p>
<form action="">
Theme <select id="theme" name="theme">
<option value="">Select a Theme</option>
<option value="css1">CSS 1</option>
<option value="css2">Css 2</option>
<option value="css3">Css 3</option>
</select>
</form>
</body>
</html>
This file consists of <p> html tag and <select> tag. on change event is attached with select by jQuery. Inside onchange event corresponding css theme is choosen.
I hope this will give you idea on how to change theme in a html page.
No comments:
Post a Comment