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

いくつかの問題:

1) あなたの HTML は、デフォルトおよび代替スタイルシートの宣言を欠いています。JS コードはリンク タグをループしていますが、コードには何もありません。

2) black と photo が変数でない限り、 のように引用符で囲む必要がありますsetActiveStyleSheet('photo')。リンクのタイトル属性が写真または黒と一致していることを確認してください。

コードのソース: http://alistapart.com/article/alternate/ . それを読んで、それは役に立ちます。

于 2013-08-15T20:40:00.613 に答える