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

Question

好的，伙计们!这是这个问题的基本要点:

我希望在用户计算机上创建一个名为 cursor 的 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。 我希望这是足够好的信息。如果没有，请告诉我。

谢谢!

更新:

感谢您的所有帮助，Akshay! 根据您所说的和我所知道的，这是对我有用的最终代码。

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>

Answer 1

您的 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>

Working fiddle