我一直在這里環顧四周，找到了在 2 個 css 檔案之間切換的方法，但檔案不多。我需要使用 1 個按鈕在 4 個不同的檔案之間切換。我加載了 html 的主要 css 被稱為style1.css.
我找到了一個對影像執行此操作的 js 片段，它所做的是將所有影像放入一個陣列中，然后將第一個物件取出并放在陣列中的最后一個。我已經能夠完成這項作業：
var imageUrls = ["images/paulfr.jpg", "images/johnfr.jpg",
"images/georgefr.jpg", "images/ringofr.jpg"];
function changeImage(){
var img = document.getElementById('image');
var imageUrl = imageUrls.shift();
img.src = imageUrl;
imageUrls.push(imageUrl);
}
現在，我嘗試為樣式表檔案重新制作它，但它失敗了：
var stylesUrls = ["css/style1.css", "css/style2.css",
"css/style3.css", "css/style4.css"];
function changeStylesheet(){
var style = document.getElementById('styles');
var stylesUrl = stylesUrls.shift();
style.src = stylesUrl;
stylesUrls.push(stylesUrl);
}
我確實確保樣式表 ID 是“樣式”。有人可以告訴我哪里出錯了嗎？
uj5u.com熱心網友回復：
將 src 更改為 href：
style.src = stylesUrl;
至
style.href = stylesUrl;
完整解決方案：
var stylesUrls = ["css/style1.css", "css/style2.css",
"css/style3.css", "css/style4.css"];
window.onload = function(){
var refButton = document.getElementById("change-styles");
refButton.onclick = function() {
var style = document.getElementById('styles');
var stylesUrl = stylesUrls.shift();
style.href = stylesUrl;
stylesUrls.push(stylesUrl);
}
};
HTML
<link href="css/style1.css" rel="stylesheet" id="styles" type="text/css">
<a href="#" id="change-styles">Change</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/522064.html