Switch Style Radio Button Using JavaScript
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.
开发者_JAVA技巧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">');
}
http://jsfiddle.net/APbSm/
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.
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>
JSFIDDLE
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>
加载中,请稍侯......
精彩评论