Question

我试图让一些html和一个外部js文件协同工作，以允许用户通过点击我主页底部的按钮来切换样式表，并且由于某种原因它不起作用。

js文件：

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

和html：

<head>
    <script 
        type="text/javascript" src="./styleswitcher.js">
    </script>
    <link rel="stylesheet" type="text/css"
        href="style1.css" title="black">
    <link rel="alternate stylesheet" type="text/css"
        href="style2.css" title="photo" />
</head>
<body>
.
.
.
<footer>
<form>
        <ul class="styleswitcher">
            <li><input type="submit"
                    onclick="setActiveStyleSheet(black);"
                    value="Style 1" id="stylebutton" />
            </li>
            <li><input type="submit"
                    onclick="setActiveStyleSheet(photo);"
                    value="Style 2" id="stylebutton" />
            </li>
        </ul>
</form>

我也试图设置在cookie中保存样式，但是已经读过并非所有浏览器都接受本地文件的cookie（我还没有域空间），所以我等待以后再这样做。

由于

[编辑]对不起，我实际上确实有我的头脑中的链接，不知道为什么我没有复制它们 - 现在修复;）。仍然无效。

Answer 1

我相信您需要完成添加或删除DOM中的链接元素...不只是禁用它们：

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Answer 2

几个问题：

1）您的HTML错过了默认和替代样式表的声明。您的JS代码循环遍历链接标记，但代码中没有。

2）除非黑色和照片是变量，否则你需要用引号括起来，比如setActiveStyleSheet('photo')。确保链接的标题属性与照片或黑色匹配。

您的代码来源：http://alistapart.com/article/alternate/。阅读它，它很有用。

为什么我不能切换样式表？

2 个答案: