2个问题/ 1.全屏（jQuery）/ 2.背景更改并另存为Cookie

你好 ，

我在网上搜索，但找不到正确的代码和平..

我想这样做： – 点击按钮进入全屏模式。 – 将背景颜色更改为深色并将其另存为cookie。

全屏模式 ：

我是jQuery的新手，无法找到合适的代码。 我找到了一个，但当我点击按钮到下一页时，它会关闭全屏模式到正常的浏览器窗口，并更改我的网站背景颜色。

成立代码：

       function toggleFullScreen() { if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { if (document.documentElement.requestFullScreen) { document.documentElement.requestFullScreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullScreen) { document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } }    

更改背景并另存为Cookie ：

我想做，成员选择单选按钮的主题是白色或黑暗。 白色主题默认

背景为白色#fff（白色）。 当成员选择Dark主题时，它会将

背景更改为＃000000（黑色）颜色。 我是新手，无法编写代码，没有示例或其他内容。 有人能告诉我，我怎么能用Cookies和Javascript / jQuery做到这一点？

会员设置页面进行更改 ：

      
Change Theme
 
  
  
  
   

页面之前将主题更改为黑暗：

和页面AFTER将主题更改为黑暗：

谢谢！

Answer 1

您可以设置cookie值，如下所示：

 document.cookie = "theme=black"; 

或者，如果您想保留其他设置，那么：

 function changeCookieValue(attribute, value) { var previousCookie = document.cookie.split(";"); for (var i = 0; i < previousCookie.length; i++) { var key = previousCookie[i].substring(0,previousCookie[i].indexOf("=")); if (key === attribute) { previousCookie[i] = attribute + "=" + value; document.cookie = previousCookie.join(";"); return; } } document.cookie = document.cookie + ";" + attribute + "=" + value; } 

你可以像这样使用它：

 `changeCookieValue("black");` 

这是你如何从cookie中读取：

 function getCookieValue(attribute) { var previousCookie = document.cookie.split(";"); for (var i = 0; i < previousCookie.length; i++) { var key = previousCookie[i].substring(0,previousCookie[i].indexOf("=")); if (key === attribute) { return presiousCookie[i].substring(previousCookie[i].indexOf("=") + 1); } } return ""; } 

您可以设置正文的类，如下所示：

 $("body").addClass(getCookieValue("theme")); 

只需确保在运行此部件时已加载正文。 你可以设计这样的主题：

 .black > div { background: #000000; } .white > div { background: #fff; } 

或者，您可以使用localStorage ，这样更方便。 至于全屏模式，没有理由重新发明轮子，因为有一个很好的全屏API，你应该用于此目的。

并且您可以使用radio按钮的onclick属性确保changeCookieValue在单击时使用正确的参数运行。

或者，您可以考虑将值存储在数据库中，并在生成服务器时将所需的类添加到服务器上的body。

编辑：

您可以在加载的事件中添加该类：

 $(function() { $("body").addClass(getCookieValue("theme")); }); 

请注意，这将负责在页面加载时显示主题。 每次调用changeCookieValue作为主题时，都需要显示它。 在你调用那个function $("body").removeClass(getCookieValue("theme")); 并在function执行后执行$("body").addClass(getCookieValue("theme")); （注意，主题已更改）。 当然，你需要一个包装器：

 function changeTheme(theme) { $("body").removeClass(getCookieValue("theme")); changeCookieValue("theme", theme); $("body").addClass(getCookieValue("theme")); } 

并在您的radio按钮上触发此changeTheme 。