如何用JavaScript和单个按钮切换4个CSS样式表？

你的代码核心问题有两个：

1. 样式表元素的属性错误 #

<link>标签（用于引入CSS）使用href属性指定文件路径，而非<img>标签用的src属性。你需要把style.src = stylesUrl;改为style.href = stylesUrl;。

2. 初始切换无效果的逻辑问题 #

页面初始加载的是style1.css，而你的数组第一个元素也是它，导致第一次调用函数时只是重复设置当前样式表，看不到切换效果。调整数组初始顺序，让第一个元素是下一个要切换的样式表即可。

修正后的完整代码 #

HTML部分

<link id="styles" rel="stylesheet" href="css/style1.css">
<button onclick="changeStylesheet()">切换样式</button>

JavaScript部分

var stylesUrls = ["css/style2.css", "css/style3.css", "css/style4.css", "css/style1.css"];

function changeStylesheet(){
    var style = document.getElementById('styles');
    var stylesUrl = stylesUrls.shift();
    style.href = stylesUrl;
    stylesUrls.push(stylesUrl);
}

逻辑说明 #

• 初始数组按style2 → style3 → style4 → style1排序，第一次点击按钮就会切换到style2.css
• 每次调用shift()取出数组第一个元素，设置为样式表路径后，再用push()把它放到数组末尾，实现循环切换

内容的提问来源于stack exchange，提问作者Tor Erik Solem