JavaScript樣式表切換器不工作？

所以我想在我的頁面上有一個樣式表切換器選項，用戶可以單擊一個單選按鈕並更改正在應用的樣式表，但它不適用於我。JavaScript樣式表切換器不工作？

這裏是什麼在我的腦海標籤：

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

任何人都不能告訴我什麼，我做錯了什麼？謝謝！

來源

2013-05-02 hayleyelisa

你得到了什麼錯誤？控制檯輸出？ – 2013-05-02 19:24:10

打開控制檯，並檢查是否有任何錯誤 – Kishore 2013-05-02 19:25:04

可變a是元件的陣列，則應該由for循環條件應該是i < a.length指數（即a[i]），而不是directly.also，訪問其elemnts。

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

來源

2013-05-02 19:30:37

完美的，這是做的伎倆。非常感謝！！ – hayleyelisa 2013-05-02 19:32:42

你應該通過用引號括起來的字符串 - 否則的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畢竟不是完美的。

來源

2013-05-02 19:20:21

嗯，好吧，我試過了，但它仍然無法正常工作。我將編輯我的文章中的代碼以反映這一點。 – hayleyelisa 2013-05-02 19:22:15

。。禁用/啓用邏輯似乎沒問題，但你的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') 
    } 
    } 
}

來源

2013-05-02 19:26:11

那麼我需要它們在頁面加載時交替使用，因爲如果用戶不想定義它，應該有一個默認樣式表集。那麼，如何使用JavaScript來將它們定義爲備用樣式表？ – hayleyelisa 2013-05-02 19:28:37

我更新了答案以包含樣本（測試）代碼。 – 2013-05-02 19:38:10

JavaScript樣式表切換器不工作？

回答

相關問題