暗模式开关

本文介绍了暗模式开关的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试制作一个可以在选中复选框时转到黑暗模式的网站。我将复选框设计为看起来像一个开关。我使用一些JavaScript来加载替代样式表'onChange'。这工作正常，问题是，当您取消选中该框时，我想再次加载原始样式表。任何帮助将不胜感激。我是JavaScript新手，想了解更多信息。以下是我的HTML，CSS& Javascript code： < input type =checkboxid =switch1name =switch1class =switch平变化= switch_style（ 'ALT'）;/> < label for =switch1>暗模式< / label> / *这是暗模式开关* / input.switch：空 { margin-left：-999px; } input.switch：空〜标签 {位置：相对; float：left; line-height：1.6em; text-indent：4em; 保证金：0.2em 0; 光标：指针; -webkit-user-select：none; -moz-user-select：none; -ms-user-select：none; user-select：none; } input.switch：empty〜label：before， input.switch：empty〜label：在之后 position：absolute; display：block; top：0; bottom：0; 剩下：0; 内容：''; width：3.6em; 背景颜色：＃c33; border-radius：0.3em; box-shadow：inset 0 0.2em 0 rgba（0,0,0,0.3）; -webkit-transition：全部100ms缓入; 转换：全部100ms缓解; } input.switch：空〜label：在之后{ width：1.4em; top：0.1em; 底部：0.1em; margin-left：0.1em; background-color：#fff; border-radius：0.15em; box-shadow：inset 0 -0.2em 0 rgba（0,0,0,0.2）; } input.switch：checked〜label：在之前{ background-color：＃393; } input.switch：checked〜label：在之后 margin-left：2em; // ***要定制*** var style_cookie_name =style; var style_cookie_duration = 30; // ***可自定义部分结束*** //您不需要自定义该行下面的任何内容 function switch_style（css_title） { //您可以在您的网站上免费使用此脚本 //您不会删除此通知或下面的网址。来自的脚本// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml var i，link_tag; $（b = b，link_tag = document.getElementsByTagName（link）; i< link_tag.length; i ++）{ if（（link_tag [i] .rel.indexOf（ stylesheet）！= -1）&& link_tag [i] .title）{ link_tag [i] .disabled = true; if（link_tag [i] .title == css_title）{ link_tag [i] .disabled = false; } } set_cookie（style_cookie_name，css_title， style_cookie_duration）; } } 函数set_style_from_cookie（） { var css_title = get_cookie（style_cookie_name）; if（css_title.length）{ switch_style（css_title）; 函数set_cookie（cookie_name，cookie_value， lifespan_in_days，valid_domain） { // http://www.thesitewizard.com/ javascripts / cookies.shtml var domain_string = valid_domain？ （; domain =+ valid_domain）：''; document.cookie = cookie_name + =+ encodeURIComponent（cookie_value）+ ; max-age =+ 60 * 60 * 24 * lifespan_in_days + ; path = /+ domain_string; } 函数get_cookie（cookie_name） { // http://www.thesitewizard.com/javascripts/cookies.shtml var cookie_string = document.cookie ; if（cookie_string.length！= 0）{ var cookie_value = cookie_string.match（'（^ |;）[\s] *'+ cookie_name + '=（[^;] *）'）; return decodeURIComponent（cookie_value [2]）; } return''; 解决方案试试这个解决方法： p> 对于您的'Dar Mode'css，请在每个选择器之前添加暗模式类。 即， .dark模式输入{} .dark模式input.switch：empty〜label { } etc ... 然后在你的JS中，只需切换类的黑暗模式为身体。 我认为这样做可能更有效率。 尝试类似的演示： I am trying to make a website that can be turned to 'dark mode' when a checkbox is selected. I have styled the checkbox to look like a switch. I have it working with some javascript to load an alternate stylesheet 'onChange'. This works fine, the problem is, when you uncheck the box, I would like it to load the original stylesheet again. Any help would be greatly appreciated. I am new to javascript and would like to learn more. The following is my HTML, CSS & Javascript code:<input type="checkbox" id="switch1" name="switch1" class="switch" onchange="switch_style('alt');"/><label for="switch1">Dark Mode</label>/* This is for the dark mode switch */input.switch:empty{ margin-left: -999px;}input.switch:empty ~ label{ position: relative; float: left; line-height: 1.6em; text-indent: 4em; margin: 0.2em 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}input.switch:empty ~ label:before,input.switch:empty ~ label:after{ position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ' '; width: 3.6em; background-color: #c33; border-radius: 0.3em; box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3); -webkit-transition: all 100ms ease-in; transition: all 100ms ease-in;}input.switch:empty ~ label:after{ width: 1.4em; top: 0.1em; bottom: 0.1em; margin-left: 0.1em; background-color: #fff; border-radius: 0.15em; box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);}input.switch:checked ~ label:before{ background-color: #393;}input.switch:checked ~ label:after{ margin-left: 2em;}// *** TO BE CUSTOMISED ***var style_cookie_name = "style" ;var style_cookie_duration = 30 ;// *** END OF CUSTOMISABLE SECTION ***// You do not need to customise anything below this linefunction switch_style ( css_title ){// You may use this script on your site free of charge provided// you do not remove this notice or the URL below. Script from// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml var i, link_tag ; for (i = 0, link_tag = document.getElementsByTagName("link") ; i < link_tag.length ; i++ ) { if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) { link_tag[i].disabled = true ; if (link_tag[i].title == css_title) { link_tag[i].disabled = false ; } } set_cookie( style_cookie_name, css_title, style_cookie_duration ); }}function set_style_from_cookie(){ var css_title = get_cookie( style_cookie_name ); if (css_title.length) { switch_style( css_title ); }}function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ){ // http://www.thesitewizard.com/javascripts/cookies.shtml var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ; document.cookie = cookie_name + "=" + encodeURIComponent( cookie_value ) + "; max-age=" + 60 * 60 * 24 * lifespan_in_days + "; path=/" + domain_string ;}function get_cookie ( cookie_name ){ // http://www.thesitewizard.com/javascripts/cookies.shtml var cookie_string = document.cookie ; if (cookie_string.length != 0) { var cookie_value = cookie_string.match ( '(^|;)[\s]*' + cookie_name + '=([^;]*)' ); return decodeURIComponent ( cookie_value[2] ) ; } return '' ;} 解决方案 Try this workaround:For your 'Dar Mode' css, add the dark-mode class before each selectors.i.e.,.dark-mode input { }.dark-mode input.switch:empty ~ label { }etc...Then in your JS, just toggle the class 'dark-mode' for the body.I think it might be more effecient that way.Try this similar demo:http://jsfiddle.net/7Lfv0jqL/ 这篇关于暗模式开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！