I would like to know how I can make a switch style function to change the website style between 2 styles. Here's what I have done so far. Please check. Thank you.
function switchcss() {
document.write('<link rel="stylesheet" type"text/css" href="css/style1.css">');
document.write('<link rel="stylesheet" type"text/css" href="css/style2.css">');
}
You need to understand how one can use JavaScript to create/remove DOM elements, including link.
Please, read, e.g. dynamically loading / removing js and css
Also, it is not a good idea to use document.write() in most circumstances. I could write you a full correct solution, but there is no "common" universal couple of lines for that, and if you have to have a skin switcher, and need to support it in the future, it makes much more sense to understand the technology underneath.
link elements and external css resources are are outside of the editable scope.There are many ways to skin a cat, here is one approach, using jQuery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Switch Style Radio Button Using JavaScript</title>
<link rel="stylesheet" href="css/style1.css" media="all" />
</head>
<body>
<input type="radio" name="switch" id="style1" value="Theme 1" checked="checked" />Theme 1<br />
<input type="radio" name="switch" id="style2" value="Theme 2" />Theme 2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#style1').click(function() {
$('link[rel="stylesheet"]').attr({
href: 'css/style1.css'
});
});
$('#style2').click(function() {
$('link[rel="stylesheet"]').attr({
href: 'css/style2.css'
});
});
</script>
</body>
</html>
I realize this is not the best approach, but answers the original poster's question with as little code as possible — kudos that it can essentially be copied, pasted, and implemented with ease.
However, a greater understanding of the problem can yield a much better solution.
Here is an implementation. It borrows much of the event handler logic from this post. YOU SHOULD NOT USE THIS CODE IN PRODUCTION. There is nothing worse than copying and pasting code you do not understand. Read and practice, when you fully understand this code you will be able to write a much better implementation that you will be able to maintain and support.
<link rel="stylesheet" type="text/css" href="style1.css" id="switch_style"/>
JS stuff:
<script type="text/javascript">
(function(){
function getEvent (e) {
if(!e) e = window.event;
if(e.srcElement) e.target = e.srcElement;
return e;
}
function addEvent (object,type,listener,param) {
if(object.addEventListener) {
object.addEventListener(type,
function(e){
listener.call(object, e, param);
},
false );
} else if(object.attachEvent) {
object.attachEvent('on'+type,
function(e){
e = getEvent(e);
listener.call(object, e, param);
}
);
}
}
var default_style = 1,
container = document.getElementById('switch_container'),
controls = container.childNodes,
styles = document.getElementById('switch_style');
function switch_style(event){
event = getEvent(event);
s = event.target.getAttribute('value');
styles.setAttribute('href, 'style' + s + '.css');
}
[].map.call(controls, function( e, i, l ){
if( e.nodeType === 1 && e.getAttribute('type') === 'radio' ) {
addEvent( e, 'click', switch_style );
}
})
// bind the function to the event handler.
})()
</script>
DOM stuff:
<div id="switch_container">
<input type="radio" name="switch" value="1"/>style 1<br/>
<input type="radio" name="switch" value="2"/>style 2<br/>
<input type="radio" name="switch" value="3"/>style 3<br/>
<input type="radio" name="switch" value="4"/>style 4<br/>
<input type="radio" name="switch" value="5"/>style 5<br/>
<input type="radio" name="switch" value="6"/>style 6<br/>
</div>
link element, for the fear that changing href might create unwanted compatibility problems somewhere down the road.
also, it is better to use: first-of-type pseudo class if there is more than one stylesheet
<script>
$('#style1').click(function() {
$('link[rel="stylesheet"]:first-of-type').attr({
href: 'css/style1.css'
});
});
$('#style2').click(function() {
$('link[rel="stylesheet"]:first-of-type').attr({
href: 'css/style2.css'
});
});</script>
