时间戳

首页 > 解决方案 > Javascript：添加 CSS 类并保存到 cookie

javascript - Javascript：添加 CSS 类并保存到 cookie

问题描述

不幸的是，我是 Javascript 的新手，需要您的帮助和知识。

案例：
我尝试开发一种“对比度改变器”，以使 Wordpress 网站更易于使用并覆盖视力障碍的用户。
现在我需要将最新的 CSS 类保存到 cookie 中并重新加载。
在这种情况下，对比度设置将被保存并可用，在单击链接或重新加载页面后，我不知道如何解决这个问题。

我很感谢任何想法和建议。

查看 CodePen 的完整代码段：https ://codepen.io/matt-prime/pen/abzGEoY

// CONTRAST CHANGER
$(document).ready(function(){

 
  // CONTRAST DEFAULT
  $(".change-reset").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
  });

  // CONTRAST BLACK WHITE
  $(".changeBW").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-black-white");
  });

  // CONTRAST WHITE BLACK
  $(".changeWB").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-white-black");
    $(".toolbar").removeClass("contrast-white-black");
  });

  // CONTRAST YELLOW BLUE
  $(".changeYB").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-yellow-blue");
    $(".toolbar").removeClass("contrast-yellow-blue");
  });

  // CONTRAST BLUE YELLOW
  $(".changeBY").click(function(){
    $("*").removeClass("contrast-black-white contrast-white-black contrast-yellow-blue contrast-blue-yellow");
    $("*").addClass("contrast-blue-yellow");
    $(".toolbar").removeClass("contrast-blue-yellow");
  });
  
})
* {box-sizing: border-box;}

body {
  margin: 0 !important;
  font-size:16px !important;
  background-color: burlywood !important;
}
/*******************************************************/
/**                Sizes based on:                    **/
/** The Markup Language (an HTML language reference)  **/
/**         W3C Working Group Note 28, May 2013       **/
/**           https://www.w3.org/TR/html/             **/
/*******************************************************/

h1 {
/* TEST */
  padding: 1em 2em;
  border: 0.2em solid;
  text-align: center;
/* TEST END */

  font-size: 2em !important;
  line-height: 2.34em !important;

}

h2 {
  font-size: 1.5em !important;
  margin: 1.2450em !important;
  line-height: 1.74em !important;
}

h3 {
  font-size: 1.17em !important;
  margin: 1.1699em !important;
  line-height: 1.41em !important;
}

h4 {
  font-size: 1em !important;
  margin: 1.3300em !important;
  line-height: 1.2em !important;
}

h5 {
  font-size: 0.83em !important;
  margin: 1.3860em !important;
  line-height: 0.92em !important;
}

h6 {
  font-size: 0.67em !important;
  margin: 1.5611em !important;
  line-height: 0.76em !important;
}

p {
  font-size: 1em !important;
  margin: 1em !important;
  line-height: 1.2em !important;
}


 ul {
   font-size: 1em !important;
   margin: 1em !important; 
   line-height: 1.2em !important;
 }

 li {
   font-size: 1em !important;
   margin: 0em !important;
   line-height: 1.2em !important;
 }

 table, td {
   font-size: 1em !important;
   margin: 0em !important;
   line-height: 1.2em !important;
 }

 pre {
   font-size: 0.8125em !important;
   margin: 0.8125em !important;
   line-height: 0.92em !important;
 }

 div,
 section {
   font-size: 1em !important;
   margin: 0em !important; 
   line-height: 1.2em !important;
}

 input,
 button {
   font-size: 0.6879em !important;
   margin: 0.125em !important;
   line-height: 0.8125em !important;
}

.toolbar {
  background:#0B0B61;
  border-bottom:1px solid;
  
/* overflow:hidden; */
/* font-size:1.8em; */

}

a.toolbar:hover,
a.toolbar:focus {background:orange !important;}

.icon {
  padding-right:0.5em;
}

nav {
	margin: 0px auto;
	display: inline-block;
}

.content,
section {
  max-width:1080px;
  padding: 1em;
  margin:0 auto;
}

.left {float:left;}

.dropdown-menu {
	background-color: #0B0B61 !important;
  color: white !important;
	/* border: 1px solid #ccc; */
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 0 0 4px 4px !important;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
	background-clip: padding-box;
  margin-top: 0px !important;
  padding: 7px 0 !important;
  margin-left: 0 !important;
}

.dropdown-menu > li > a {
	display: block;
	padding: 0.5em 0.9em !important;
	clear: both;
	font-weight: normal;
  font-size: 1.2em;
  line-height: 1.428571429;
	/* color: white !important; */
	white-space: nowrap;
  cursor: pointer;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
  text-transform: none;

}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	text-decoration: none;
}

.btn {
  font-size: 1.2em !important;
}

.btn-label {

}

.btn-default::after {
	content: "⯆";
	display: inline-block;
}

.btn-default {
	color: white !important; 
	background-color: #0B0B61 !important;
	border-color: white !important;
  border-radius: 0 !important;
  border:0 !important;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

.btn-default:hover,
.btn-default:focus {
  color: white !important;
  background-color: orange !important;
  border-left: :1px solid #0B0B61 !important;
  border-right: :1px solid #0B0B61 !important;
}

/** CSS CLASSES CONTRAST SUBMENU **/
/* CONTRAST BUTTON DEFAULT */
.contrast-default {color: white !important;}
.contrast-default:hover,
.contrast-default:focus,
.contrast-default:active {
  background-color: orange!important;
  border-color: white!important;
  color:white!important;
  
}

/* CONTRAST BUTTON BLACK WHITE */
.contrast-sw {color: white !important;}
.contrast-sw:hover,
.contrast-sw:focus,
.contrast-sw:active {
  background-color: white!important;
  border-color: black!important;
  color:black!important;
}

/* CONTRAST BUTTON WHITE BLACK */
.contrast-ws {color: white !important;}
.contrast-ws:hover,
.contrast-ws:focus,
.contrast-ws:active {
  background-color: black!important;
  border-color: white!important;
  color:white!important;
}

/* CONTRAST BUTTON YELLOW BLUE */


.contrast-gb {color: white !important;}
.contrast-gb:hover,
.contrast-gb:focus,
.contrast-gb:active {
  background-color: #003AFF!important;
  border-color: #FFFA06!important;
  color:#FFFA06!important;
  /* font-weight: bold; */
}


/* CONTRAST BUTTON BLUE YELLOW */


.contrast-bg {color: white !important;}
.contrast-bg:hover,
.contrast-bg:focus,
.contrast-bg:active {
  background-color: #FFFA06!important;
  border-color: #003AFF!important;
  color:#003AFF!important;
}

/** CSS CLASS CONTRAST SUBMENU BUTTON END **/

/** CSS CLASS CONTRAST LAYOUT **/

/* CONTRAST LAYOUT BLACK WHITE */
.contrast-black-white {
  background-color: white!important;
  border-color: black!important;
  color:black!important;
}

/* CONTRAST LAYOUT WHITE BLACK */
.contrast-white-black {
  background-color: black!important;
  border-color: white!important;
  color:white!important;
  }

/* CONTRAST LAYOUT YELLOW BLUE */
.contrast-yellow-blue {
  background-color: #003AFF!important;
  border-color: #FFFA06!important;
  color:#FFFA06!important;
}

/* CONTRAST LAYOUT BLUE YELLOW */
.contrast-blue-yellow {
  background-color: #FFFA06!important;
  border-color: #003AFF!important;
  color:#003AFF!important;
}
/** CSS CLASS CONTRAST LAYOUT END **/
<html>

<head>
  <title>Contrast Changer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

  <body>
    <div class="toolbar" role="none">
      <nav role="navigation">
        <div class="btn-group">
          <button title="Contrast"class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <i class="icon fas fa-adjust"></i>
            <span class="btn-label">Contrast</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            
            <li>
              <a aria-label="Contrast Reset" href="#" class="change-reset contrast-default">Reset</a>
            </li>
            <li>
              <a aria-label="Contrast Black White" href="#" class="changeBW contrast-sw">Black / White</a>
            </li>
            <li>
              <a aria-label="Contrast White Black" href="#" class="changeWB contrast-ws">White / Black</a>
            </li>
            <li>
              <a aria-label="Contrast Yellow Blue" href="#" class="changeYB contrast-gb">Yellow / Blue</a>
            </li>
            <li>
              <a aria-label="Contrast Blue Yellow" href="#" class="changeBY contrast-bg">Blue / Yellow</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    
    <div class="a11y">
      <section class="content" role="main">
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <p strong>Paragraph</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </section>
    </div>
  </body>

标签： javascriptcsscookies

解决方案

使用这两个 cookie 函数来设置和获取 cookie。在 setCookie() 函数中，我确实设置了 90 天（以毫秒为单位的时间）的过期时间，您可以将其更改为适合您网站的最佳值。

function setCookie(cookieName, cookieValue) {
  var d = new Date();
  d.setTime(d.getTime() + (90 * 24 * 60 * 60 * 1000)); // 90 days
  document.cookie = cookieName + "=" + cookieValue + ";expires=" + d.toUTCString() + ";path=/";
}

function getCookie(cookieName) {
  var name = cookieName + "=";
  var i, c, ca = document.cookie.split(';');
  for(i = 0; i < ca.length; i++) {
    c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name)  == 0) return c.substring(name.length, c.length);
  }
  return "";
}

// how to get the cookie
var cValue = getCookie("contrast");
if (cValue == "") {
  // cookie not set yet
} else {
  // cookie in variable cValue
}

// how to set the cookie
setCookie("contrast", "contrast-blue-yellow");

推荐阅读