Question

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

以下是我头上的标签：

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

有人介意我说我做错了吗？谢谢！

Answer 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似乎并不完美。

Answer 2

变量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;
    }
  } 
}

Answer 3

。。禁用/启用逻辑似乎没问题，但您的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')
    }
  }
}

JavaScript样式表切换器无法正常工作？

3 个答案: