简体   繁体   English

为什么这不起作用(HTML,CSS和Javascript

[英]Why does this not work (HTML, CSS and Javascript

I'm having trouble with some code not working, and I'm not sure why. 我遇到一些无法正常工作的代码,也不确定为什么。 (I am a 1st year Computer Science student as don't know much about this) (我是计算机科学专业的一年级学生,对此了解不多)

<head>
<link rel="stylesheet" type="text/css" href="Task1.css" title="Normal">
<link rel="alternate stylesheet" type="text/css" href="Task1BaW.css" title="Other">         
<script type="text/javascript" src="/scripts/styleswitcher.js">
</script>
</head>

<body>  
 <div id="header">    <!-- header -->
     <button onclick="setActiveStyleSheet('Normal')">Change style to default</button>
     <button onclick="setActiveStyleSheet('Other')">Change style to Easy view</button>                                   
 </div>    <!-- end of header-->

Basically I want it to switch to the "Normal" Css when the 1st button is pressed, and switch to the "Other" Css when the 2nd button is pressed. 基本上,我希望它在按下第一个按钮时切换到“普通” CSS,并在按下第二个按钮时切换到“其他” CSS。

Thanks. 谢谢。

NB: I've changed the '' to '(thanks for pointing that out, that was a stupid mistake) and not getting any errors that I'm aware of. 注意:我已将''更改为'(感谢您指出,这是一个愚蠢的错误),但是没有得到我所知道的任何错误。 Still doesn't seem to be working yet. 似乎仍然没有工作。 I'm writing this is PSPad, if that helps at all. 我正在写的是PSPad,如果有帮助的话。 And trying it in the IE that PSPad opens and Chrome. 然后在PSPad打开的IE和Chrome浏览器中进行尝试。

Also, changing the CSS should change the background and text size. 另外,更改CSS应该更改背景和文本大小。

styleswitcher.js code: styleswitcher.js代码:

function setActiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
   a.disabled = true;
   if(a.getAttribute("title") == title) a.disabled = false;
  }
 }
}

function getActiveStyleSheet() {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
 return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
      }
  return null;
}

 function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(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,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

If anyone has a simpler way of doing this instead of fixing this, and can explain it to me so I can understand why it works, I'd appreciate it too. 如果有人有一个更简单的方法来解决这个问题,而不是要解决此问题,并且可以向我解释一下,以便我能理解它为什么起作用,我也将不胜感激。

In javascript, you have to use ' or " . 在javascript中,您必须使用'"

Your quote ' and ' isn't valid. 您的报价''无效。

Since you did that, even StackOverflow's syntax highlighting failed!! 自从您这样做以来,甚至StackOverflow的语法突出显示都失败了!!

Try using this : 尝试使用这个:

<div id="header">    <!-- header -->
     <button onclick="setActiveStyleSheet('Normal')">Change style to default</button>
     <button onclick="setActiveStyleSheet('Other')">Change style to Easy view</button>                                   
</div>    <!-- end of header-->

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM