JavaScript样式表切换器不工作

JavaScript stylesheet switcher not working?

本文关键字：工作 切换器 样式 JavaScript      更新时间：2023-09-26

所以我想在我的页面上有一个样式表切换选项，用户可以单击一个单选按钮，它改变了正在应用的样式表，但它不适合我。

这是我的head标签中的内容:

<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>
谁能告诉我我做错了什么吗?谢谢你！

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

你应该传递用引号括起来的字符串，否则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]

你会没事的。

。禁用/启用逻辑看起来不错，但是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')
    }
  }
}
相关文章：