我想知道如何制作切换样式功能以在两种样式之间更改网站样式。这是我到目前为止所做的。请检查。谢谢。
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">');
}
【问题讨论】：
标签： javascript css radio-button
您需要了解如何使用 JavaScript 创建/删除 DOM 元素，包括 link。
请阅读，例如dynamically loading / removing js and css
另外，在大多数情况下使用 document.write() 也不是一个好主意。我可以给你写一个完全正确的解决方案，但是没有“通用”通用的几行代码，如果你必须有一个皮肤切换器，并且将来需要支持它，那么理解底层技术。
【讨论】：
link 元素和外部 css 资源超出了可编辑范围。
给猫剥皮有很多方法，这里有一种方法，使用 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>
我意识到这不是最好的方法，但用尽可能少的代码回答了原始发帖人的问题——值得称赞的是，它基本上可以轻松复制、粘贴和实施。
但是，对问题有更深入的了解可以产生更好的解决方案。
【讨论】：
这是一个实现。它借用了this post 的大部分事件处理程序逻辑。您不应在生产中使用此代码。没有什么比复制和粘贴您不理解的代码更糟糕的了。阅读和练习，当您完全理解此代码时，您将能够编写一个更好的实现，您将能够维护和支持。
<link rel="stylesheet" type="text/css" href="style1.css" id="switch_style"/>
JS 的东西：
<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 的东西：
<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 元素，因为担心更改 href 可能会在以后的某个地方产生不必要的兼容性问题。
另外，如果有多个样式表，最好使用：first-of-type 伪类
<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>
【讨论】：