如何使用Javascript更改附加的CSS文件？

我想知道,是否可以使用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

标签：javascript,stylesheet
来源： https://codeday.me/bug/20190825/1715111.html