1

我正在尝试让一些 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（我还没有域空间），所以我稍后再做。

谢谢

[编辑] 抱歉，我确实有这些链接，不知道为什么我没有复制它们 - 现在已修复；）。还是不行。

4

2 回答 2

1

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

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

于 2013-08-15T20:38:59.553 回答
1

几个问题：

1) 您的 HTML 缺少默认样式表和替代样式表的声明。您的 JS 代码正在循环链接标签，但您的代码中没有。

2) 除非 black 和 photo 是变量，否则您需要用引号将它们括起来，例如setActiveStyleSheet('photo'). 确保链接的标题属性与照片或黑色相匹配。

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

于 2013-08-15T20:40:00.613 回答