gpt4 book ai didi

javascript - 使用 localStorage 持久化切换 CSS 样式表

转载 作者:太空宇宙 更新时间:2023-11-03 23:27:25 24 4
gpt4 key购买 nike

我遇到一个问题,在两个单独的样式表(一个蓝色和一个黑色)之间切换时,我尝试使用 localStorage 方法来存储用户首选项。

我只是无法让它运行,而且我似乎无法调用存储函数,更不用说设置它了。

这是 javascript 和 html 代码。

<head>
<title>Welcome Page</title>
<link id= "pagestyle" rel="stylesheet" type="text/css" href="blue.css" title= "blue"/>
<link id= "pagestyle" rel="stylesheet" type="text/css" href="../blue.css" title= "blue" />


<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

<script type= "text/javascript">
function swapstylesheet(sheet) {
document.getElementById('pagestyle').setAttribute('href',sheet);
}


function storebackground(swapstylesheet) {
localStorage.setItem(swapstylesheet);
}

function loadbackground(args) {

document.getElementById("pagestyle").innerHTML = localStorage.swapstylesheet;
//code
}
</script>
<div id ="cssbutton">
<button id= "blueb" value = "bluev" class ="css1" onclick = "swapstylesheet('blue.css')">Blue</button>
<button id= "darkb" value = "darkv" class ="css2" onclick = "swapstylesheet('dark.css')">Dark</button>

谁能告诉我我做错了什么?

最佳答案

你没有显示你从哪里调用 loadbackground 但你的 localStorage 代码需要像下面这样:

 function storebackground(swapstylesheet) {
localStorage.setItem('sheetKey', swapstylesheet); //you need to give a key and value
}

function loadbackground(args) {
document.getElementById("pagestyle").innerHTML = localStorage.getItem('sheetKey'); //get value by key
//or document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}

关于javascript - 使用 localStorage 持久化切换 CSS 样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26417764/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com