使用 JavaScript 切换样式单选按钮
Switch Style Radio Button Using JavaScript
我想知道如何制作切换样式功能以在 2 种样式之间更改网站样式。这是我到目前为止所做的。请检查。谢谢。
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/
你需要了解如何使用 JavaScript 来创建/删除 DOM 元素,包括link
。
请阅读,例如动态加载/删除 js 和 css
此外,在大多数情况下使用 document.write() 不是一个好主意。我可以给你写一个完全正确的解决方案,但没有"通用"的通用几行,如果你必须有一个皮肤切换器,并且将来需要支持它,那么了解下面的技术更有意义。
有很多
方法可以给猫剥皮,这里有一种方法,使用 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>
我意识到这不是最好的方法,但用尽可能少的代码回答了原始海报的问题——值得称赞的是,它基本上可以轻松复制、粘贴和实现。
但是,对问题的更深入理解可以产生更好的解决方案。
这是一个实现。它借用了这篇文章中的大部分事件处理程序逻辑。 不应在生产中使用此代码。没有什么比复制和粘贴您不理解的代码更糟糕的了。阅读和练习,当您完全理解此代码时,您将能够编写一个更好的实现,您将能够维护和支持。
<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>
吉斯菲德尔
此外,最好使用: 如果有多个样式表,则为第一个类型的伪类
<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>
相关文章:
- 根据单选按钮在页面加载时使用不同的样式表
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- 单选按钮 - 单击时设置背景样式
- 使用 javascript on单击以设置当前所选样式单选按钮
- 仅在一个表格行内设置单选按钮标签的样式
- jQuery:使用 parent()、next() 单击单选按钮上的样式和取消样式
- 每个单选按钮的不同样式
- 引导程序中的引导单选按钮没有样式不可更改
- Javascript:使用没有JQuery的单选按钮更改样式
- 更改'李'css样式基于单击的单选按钮
- jquerymobile-动态添加单选按钮会丢失样式
- 样式复选框&单选按钮
- 使用单选按钮替换样式表
- 如何使用jquery-mobile以水平样式显示垂直单选按钮
- 将样式应用于选中的单选按钮'
- CSS样式的单选按钮不响应键盘
- 对单选按钮进行检查/样式化,用锚点包裹它
- 如何使用jquery为单选按钮设置边框样式
- 样式单选按钮,只显示选定的
- 使用 JavaScript 切换样式单选按钮