我正在使用document.getElementById("banner").style.backgroundColor = COLOR来更改Cookie。我拿起cookie并读取它，然后将字符串放入变量中（例如：var backgroundcolor =“ red”），因为不知道如何将变量放入COLOR所在的位置，因此如何将其放入COLOR插槽中。 / p>
这里是我的完整代码：
<script>
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var bannerlinkcolor = getCookie("bannertheme");
if (bannerlinkcolor = 0) {
var textcolor = "#000000";
var bgcolor = "#ff0000";
} else {
var textcolor = "#FFFFFF";
var bgcolor = "#800080";
}
}
</script>
<script>
document.getElementById("banner").style.color = textcolor;
document.getElementById("banner").style.backgroundColor = bgcolor;
</script>
</head>
<body>
<div id="banner" style="border:2px dotted orange; height:20px; width:100%; "><center>Check out our <a href="https://www.youtube.com/channel/UC4Eg3V26uXxWY-M639mGDrQ" target="_blank">Youtube</a> Channel! Help reinstate Net Neutrality! Visit <a href="https://www.battleforthenet.com/" target="_blank">https://www.battleforthenet.com/</a>!!<center></div>
</body>
</html>
（我遗漏了顶部，因为其中包含一些Google Analytics（分析）内容）
在此处存储cookie数据的地方：
function switchTheme(e) {
if (e.target.checked) {
var r = confirm("Are you sure you want to switch on light mode? (It hurts my eyes)");
if(r == true) {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
setCookie("bannertheme", 1, 1);
}else {
toggleSwitch.checked = false;
}
}
else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
setCookie("bannertheme", 0, 1);
}
}
切换物体是通过开关激活的
我已经尝试了这两种方法，但均无效：
document.getElementById("banner").style.backgroundColor = var(bgcolor);
document.getElementById("banner").style.backgroundColor = bgcolor;
document.getElementById("banner").style.backgroundColor = VARIABLE_HERE;
我需要将横幅的颜色更改为紫色
答案 0 :(得分：2)
您可以简单地使用以下代码段进行操作。
var purple = //get cookie code
document.getElementById("banner").style.backgroundColor = purple;
已审核
不要使用两种不同的脚本标记单个脚本中包含的所有东西。
查看我的代码
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body >
<div id="banner" style="border:2px dotted orange; height:20px; width:100%; "><center>Check out our <a href="https://www.youtube.com/channel/UC4Eg3V26uXxWY-M639mGDrQ" target="_blank">Youtube</a> Channel! Help reinstate Net Neutrality! Visit <a href="https://www.battleforthenet.com/" target="_blank">https://www.battleforthenet.com/</a>!!<center></div>
</body>
</html>
</body>
</html>
<script>
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var textcolor = "";
var bgcolor = "";
var bannerlinkcolor = getCookie("bannertheme");
if (bannerlinkcolor == 0) {
textcolor = "#000000";
bgcolor = "#ff0000";
} else {
textcolor = "#FFFFFF";
bgcolor = "#800080";
}
document.getElementById("banner").style.color = textcolor;
document.getElementById("banner").style.backgroundColor = bgcolor;
}
</script>
答案 1 :(得分：0)
要存储样式数据，最好使用sessionStorage而不是cookie。
sessionStorage.setItem('myBackgroundColor', 'red');
var backgroundColor = sessionStorage.getItem('myBackgroundColor');
document.getElementById("banner").style.backgroundColor = backgroundColor;
答案 2 :(得分：0)
就像生活中所有琐碎的现实一样，做起来似乎很容易。所以这里是演练。
示例
var abc = 123;
var def = abc;
没有规则说明如何将此不适用于您的情况；
var colorcode = "#000000";
var colorname = "black";
document.getElementById("banner").style.backgroundColor = colorcode;
document.getElementById("banner").style.backgroundColor = colorname;
所以我们的目的是使LHS = RHS公式符合要求。
假设我们在其所有表现形式中都创建了cookie。
document.cookie = "colorcode=#000000";
或
document.cookie = "colorcode=black";
那是很容易的部分，但是当涉及到按名称检索cookie时，必须跑一两英里才能到达重点。
首先获取所有cookie的集合
var allcookies = document.cookie;
这是类似以下示例的字符串；
__utmc=264131991; __utma=264131991.1393864252.1562868442.1567905512.1567968949.26; __utmz=264131991.1567968949.26.13.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided); __utmb=264131991.1.10.1567968949; colorcode=#000000;
我们必须通过以下拆分函数将其转换为数组；
var cookiearray = allcookies.split(';');
现在我们可以通过for循环在数组中移动（速度更快）并获取我们的值；
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
if (name = "colorcode") {
var colorvalue = value;
}
}
创建了colorvalue，如果名称匹配，则捕获该值。
现在，我们可以使用LHS = RHS来设置背景色的值。
document.getElementById("banner").style.backgroundColor = colorvalue;
没有任何障碍可以将上述代码直接放入if条件中的for循环中。
但是它不可重用。因此，我们必须诉诸W3学校所证明的功能。
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
document.getElementById("banner").style.backgroundColor = getCookie("colorcode");
Function接受参数，在函数内部创建局部变量，然后收集cookie并将其收集到数组中。
然后运行带有嵌套while的循环，直到满足条件作为每个数组值的第一个字符，即空白。
在while循环中，它通过 substring（）方法创建一个新变量，该方法从字符串中提取除第一个字符以外的所有字符，在本例中为空白。
在父循环的下一步中的一次while循环中完成后，它会以 truthy 的方式运行 indexof方法。
如果为true，则再次使用子字符串值返回值。
这可能不是最优雅的方法吗，但是无论哪种方式，您都必须经过上述步骤才能从cookie中获取价值。
如果有规定，为什么不通过本地存储运行相同的内容。
localStorage.setItem("colorcode", "#000000");
document.getElementById("banner").style.backgroundColor = localStorage.getItem("colorcode");
省去您的头痛。