我想知道,是否可以使用JavaScript更改附加的样式表?
例如:
<link href="stylesheet.css" rel="stylesheet" type="text/css">
.....
<div id="controls">
<div id="red" onClick="styler(1)">R</div>
<div id="green" onClick="styler(2)">G</div>
<div id="blue" onClick="styler(3)">B</div>
<div id="reset" onClick="styler(4)">Reset</div>
</div>
JavaScript的
function styler(attr){
switch(attr){
case'1':document.----- = "stylesheet1.css";break;
case'2':document.----- = "stylesheet2.css";break;
case'3':document.----- = "stylesheet3.css";break;
case'4':document.----- = "stylesheet.css";break;
default:;break;
}
}
解决方法:
将ID添加到链接标记并使用
<link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function styler(attr){
var href;
switch(attr){
case'1':href = "stylesheet1.css";break;
case'2':href = "stylesheet2.css";break;
case'3':href = "stylesheet3.css";break;
case'4':href = "stylesheet.css";break;
default:;break;
}
document.getElementById('myStyleSheet').href = href;
}
</script>
见这post