Javascript使用javascript按钮更改CSS页面，并根据cookie保存

Javascript change CSS page with javascript buttons and save based on cookie

本文关键字：保存 cookie 页面 CSS javascript 使用 按钮 Javascript      更新时间：2023-09-26

好吧，伙计们！以下是这个问题的基本要点：

我希望在用户的计算机上创建一个名为光标的cookie，默认情况下值为yes。然后，我想在主页上创建两个按钮。其中一个会说"将光标更改为默认值"，另一个会说"将光标更改为新"。

它们都会修改光标 cookie。如果 cookie 的值设置为 yes，它将加载主 CSS 页面。否则，它将加载备用 CSS 页面。

这是我尝试的似乎不起作用的方法：

在头部标签中：

<link type="text/css" rel="stylesheet" href="http://example.com/main.css" />
<script type="text/javascript">
    window.onload = function () {
window.onload = function() {
var curcookie=getCookie("cursor");
if (curcookie===null) {
    curcookie = "";
}
if(curcookie === "no") {
    changecookie();
}
function getCookie(name) {
var nameEQ = name + "=";
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(nameEQ) != -1) return c.substring(nameEQ.length,c.length);
}
return null;
}
function changecookie() {
    var oldlink = document.getElementsByTagName("link").item(5);
    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", "http://example.com/alt.css");
    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
</script>

在正文标签中：

<script type="text/javascript">
    document.getElementById("cursoroptions").innerHTML = ("<input type='"button'" value='"Change the cursor to default'" onclick='"document.cookie = '"cursor=no'"'"" /><br /><input type='"button'" value='"Change the cursor to new'" onclick='"document.cookie = '"cursor=yes'"'"" />);
</script>
<div id="cursoroptions"></div>

另一个注意事项是，如果这意味着什么，我正在使用GoDaddy。我希望这些信息足够好。如果没有，请告诉我。

谢谢！

更新：

谢谢你的帮助，阿克沙伊！使用你所说的和我所知道的，这是对我有用的最终代码。

document.getElementsByTagName("head")[0].setAttribute("id", "linkcss");
Hellocookie();
function Hellocookie() {
   var curcookie = getCookie("cursor");
   if (curcookie === null) {
      curcookie = "";
   }
   if (curcookie === "no") {
      changecss2();
   }
   else {
      changecss1();
   }
}
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 changecss1() {
   document.getElementById("linkcss").innerHTML += ('<link rel="stylesheet" type="text/css" href="http://example.com/firstcss.css">');
}
function changecss2() {
   document.getElementById("linkcss").innerHTML += ('<link rel="stylesheet" type="text/css" href="http://example.com/secondcss.css">');
}

至于按钮：

<script type="text/javascript">
   window.addEventListener("load", function(evt) {document.getElementById("cursoroptions").innerHTML = ("<input type='"button'" class='"mysubmitbutton'" value='"Change the cursor to default'" onclick=''document.cookie='"cursor=no'"' /><br /><input type='"button'" class='"mysubmitbutton'" value='"Change the cursor to Lazybott'" onclick=''document.cookie = '"cursor=yes'"' />");})
</script>
<div id="cursoroptions"></div>

你的javascript代码格式不正确。

你

没有关闭你的括号，你写了两次onload。这就是您的代码不起作用的原因。您在这里使用双引号代替单引号。

onclick='"document.cookie = '"cursor=no'"'""

但你应该使用。

onclick=''document.cookie='"cursor=no'"'

这是正确的代码。

<link type="text/css" rel="stylesheet" href="http://example.com/main.css" />
<script type="text/javascript">
window.onload = function() {
  var curcookie = getCookie("cursor");
  if (curcookie == null) {
    curcookie = "";
  }
  if (curcookie == "no") {
    changecookie();
  }
};
function getCookie(name) {
  var nameEQ = name + "=";
  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(nameEQ) != -1) return c.substring(nameEQ.length, c.length);
  }
};
function changecookie() {
  var oldlink = document.getElementsByTagName("link").item(0);
  oldlink.href = 'http://example.com/alt.css';
};
</script>

对于正文标签：

<script type="text/javascript">
    document.getElementById("cursoroptions").innerHTML = ("<input type='"button'" value='"Change the cursor to default'" onclick=''document.cookie='"cursor=no'"' /><br /><input type='"button'" value='"Change the cursor to new'" onclick=''document.cookie = '"cursor=yes'"' />");
</script>
<div id="cursoroptions"></div>

工作小提琴

相关文章：