使用JavaScript切换外部样式表并使用本地存储进行保存的方法如下:
<link rel="stylesheet" href="styles.css" id="styleSheet">
function toggleStyle() {
var styleSheet = document.getElementById("styleSheet");
if (styleSheet.getAttribute("href") === "styles.css") {
styleSheet.setAttribute("href", "alternate_styles.css");
} else {
styleSheet.setAttribute("href", "styles.css");
}
}
<button onclick="toggleStyle()">切换样式</button>
function toggleStyle() {
var styleSheet = document.getElementById("styleSheet");
if (styleSheet.getAttribute("href") === "styles.css") {
styleSheet.setAttribute("href", "alternate_styles.css");
localStorage.setItem("style", "alternate_styles.css");
} else {
styleSheet.setAttribute("href", "styles.css");
localStorage.setItem("style", "styles.css");
}
}
// 在页面加载时检查本地存储中是否有样式选择,并应用该选择
window.onload = function() {
var style = localStorage.getItem("style");
var styleSheet = document.getElementById("styleSheet");
if (style) {
styleSheet.setAttribute("href", style);
}
}
这样,当用户点击切换样式按钮时,外部样式表将切换,并且用户的选择将在本地存储中保存,以便在页面刷新后保持选择状态。
请注意,以上代码示例中的样式表文件名仅作为示例,您可以根据实际情况修改为您自己的样式表文件名。另外,本地存储使用的是localStorage对象,您也可以使用其他适合您的本地存储方式。
领取专属 10元无门槛券
手把手带您无忧上云