Question

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

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

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

以下是我尝试过的似乎不起作用的内容：

在head标签中：

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

在body标签中：

<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两次。这就是为什么您的代码无法正常工作的原因。你在这里用双q来代替单引号。

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

Javascript使用javascript按钮更改CSS页面并基于cookie保存

1 个答案: