0

所以我试图在我的页面上有一个样式表切换器选项，用户可以在其中单击一个单选按钮并更改正在应用的样式表，但它对我不起作用。

这是我的头标签中的内容：

<link href="stylesheet.css" type="text/css" rel="stylesheet" title="main">
<link href="stylesheet2.css" type="text/css" rel="alternate stylesheet" title="alt1">
<link href="stylesheet3.css" type="text/css" rel="alternate stylesheet" title="alt2">
<script language="javascript">

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

这是实际的广播形式：

<p><input type="radio" name="look" onClick="setActiveStyleSheet('main')" checked> Light & dark blue</p>
<p><input type="radio" name="look" onClick="setActiveStyleSheet('alt1')"> Black & white</p>
<p><input type="radio" name="look" onClick="setActiveStyleSheet('alt2')">Yellow & red</p>

有人介意告诉我我做错了什么吗？谢谢！

4

3 回答 3

1

变量a是元素数组，您应该通过索引（即。a[i]）而不是直接访问它的元素。另外，for循环条件应该是i < a.length。

function setActiveStyleSheet(title) {
 var i, a, main;
a = document.getElementsByTagName("link");
 for(i=0; i< a.length ; i++) {
 if(a[i].getAttribute("rel").indexOf("style") != -1
    && a[i].getAttribute("title")) {
   a[i].disabled = true;
   if(a[i].getAttribute("title") == title) a[i].disabled = false;
    }
  } 
}
于 2013-05-02T19:30:37.463 回答
1

您应该传递用引号括起来的字符串 - 否则 JavaScript 认为它们是变量名：

<p><input type="radio" name="look" onClick="setActiveStyleSheet('main')" checked> Light & dark blue</p>
<p><input type="radio" name="look" onClick="setActiveStyleSheet('alt1')"> Black & white</p>
<p><input type="radio" name="look" onClick="setActiveStyleSheet('alt2')">Yellow & red</p>

但你真正的问题是：

a = document.getElementsByTagName("link")

设置a为 HTMLCollection 对象，而不是链接本身。将其更改为：

a = document.getElementsByTagName("link")[i]

你会没事的。

看来alistapart毕竟并不完美。

于 2013-05-02T19:20:21.393 回答
0

. . 禁用/启用逻辑似乎没问题，但你的 for 循环条件看起来不太好。无论如何，问题在于其他样式表仍然设置为“替代样式表”。你也应该改变它。

function setActiveStyleSheet(activeTitle) {
  var cur, t, i = 0, a = document.getElementsByTagName("link"), n = a.length;
  for (;i<n;i++) { cur = a[i], t = cur.getAttribute('title');
    if (!~cur.getAttribute("rel").indexOf("style") || !t) { continue; }

    if (cur.title == activeTitle) {
      cur.disabled = false; cur.setAttribute('rel', 'stylesheet')
    } else {
      cur.disabled = true; cur.setAttribute('title', 'alternate stylesheet')
    }
  }
}
于 2013-05-02T19:26:11.060 回答