[英]How do I stop CSS stylesheet from resetting to default after refreshing the page?
I have this piece of code:我有这段代码:
$(document).ready(function() { $(".lightDark").hide(); $("#changeTheme").click(function() { $(".lightDark").toggle("slow"); }); // Switch theme $('#lightTheme').click(function() { $('link[href="darkMode.css"]').attr('href','lightMode.css'); }); $('#darkTheme').click(function() { $('link[href="lightMode.css"]').attr('href','darkMode.css'); }); });
body { background-color: black; } .changeThemeButtons { float: right; margin-top: 50px; margin-right: 50px; border:2px solid white; border:none; color:white; } .changeThemeButtons td { font-family: 'Open Sans Condensed', sans-serif; font-size: 1.6em; text-transform: uppercase; color:white; text-align: center; } .changeThemeButtons th { background-color: #733FFF; border-radius: 100px; height:200px; width:200px; } #changeTheme { cursor: pointer; } #changeTheme i { color:#f00; } #darkTheme { color:black; margin-right: 50px; } #lightTheme { color:white; }
<script src="https://kit.fontawesome.com/c22b2f5999.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" id="darkMode" href="darkMode.css"> <div class="block two"> <nav> <a href="#about">About me</a> <a href="#myWork">My Work</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </nav> <table class="changeThemeButtons" align="right"> <tr> <td><a id="changeTheme">Change Theme <i class="fas fa-caret-down"></i></a></td> </tr> <tr> <th class="lightDark"> <a href="#" id="darkTheme"><i class="fas fa-circle fa-3x"></i></a> <a href="#" id="lightTheme"><i class="fas fa-circle fa-3x"></i></a> </th> </tr> </table>
Everything works fine, until the point where you're on lightMode.css and let's say you refresh the page, then it would reset to the darkMode.css.一切正常,直到你在 lightMode.css 上,假设你刷新页面,然后它会重置为 darkMode.css。 I have tried to remove the default darkMode.css from HTML (with JQuery), but it doesn't seem to work.
我试图从 HTML(使用 JQuery)中删除默认的 darkMode.css,但它似乎不起作用。 I need it to stay to lightMode (if selected) until you'd click again to change to darkMode manually.
我需要它保持 lightMode(如果选择),直到您再次单击以手动更改为 darkMode。
Just put your theme css in a css file and pass it to the function, On page load the if (localStorage.getItem("theme") != "")
checks if theme has been set.. Here you have an example:只需将您的主题 css 放在一个 css 文件中并将其传递给函数,在页面加载
if (localStorage.getItem("theme") != "")
检查主题是否已设置.. 这里有一个示例:
if (localStorage.getItem("theme") != "") { loadcssfile(localStorage.getItem("theme")); } function loadcssfile(filename) { if (filename != "") { localStorage.setItem("theme", filename); } var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref); }
<div onclick="loadcssfile('css/pink.css')" id="pink"> Pink </div> <div onclick="loadcssfile('css/blue.css')" id="blue"> Blue </div>
You may do something like below to store the value in localstorage:您可以执行以下操作将值存储在 localstorage 中:
$(document).ready(function() { const theme = localStorage.getItem('mode'); console.log(theme); if(theme){ $('link[id="darkMode"]').attr('href',theme); } $("#changeTheme").click(function() { $(".lightDark").toggle("slow"); }); // Switch theme $('#lightTheme').click(function() { $('link[id="darkMode"]').attr('href','lightMode.css'); localStorage.setItem('mode','lightMode.css'); }); $('#darkTheme').click(function() { $('link[id="darkMode"]').attr('href','darkMode.css'); localStorage.setItem('mode','darkMode.css'); }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.