如何將事件處理程序存儲在單獨的文檔中

我正在使用此JavaScript代碼從A List Apart更改樣式表。如何將事件處理程序存儲在單獨的文檔中

的代碼看起來是這樣的：

function setActiveStyleSheet(title) { 
    var i, a, main; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
     a.disabled = true; 
     if(a.getAttribute("title") == title) a.disabled = false; 
    } 
    } 
} 

function getActiveStyleSheet() { 
    var i, a; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); 
    } 
    return null; 
} 

function getPreferredStyleSheet() { 
    var i, a; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 
     && a.getAttribute("rel").indexOf("alt") == -1 
     && a.getAttribute("title") 
     ) return a.getAttribute("title"); 
    } 
    return null; 
} 

function createCookie(name,value,days) { 
    if (days) { 
    var date = new Date(); 
    date.setTime(date.getTime()+(days*24*60*60*1000)); 
    var expires = "; expires="+date.toGMTString(); 
    } 
    else expires = ""; 
    document.cookie = name+"="+value+expires+"; path=/"; 
} 

function readCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
    var c = ca[i]; 
    while (c.charAt(0)==' ') c = c.substring(1,c.length); 
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
    return null; 
} 

window.onload = function(e) { 
    var cookie = readCookie("style"); 
    var title = cookie ? cookie : getPreferredStyleSheet(); 
    setActiveStyleSheet(title); 
} 

window.onunload = function(e) { 
    var title = getActiveStyleSheet(); 
    createCookie("style", title, 365); 
} 

var cookie = readCookie("style"); 
var title = cookie ? cookie : getPreferredStyleSheet(); 
setActiveStyleSheet(title);

現在，在網站上，建議您要的鏈接在HTML中添加以下代碼：改文風使用此默認我試着和它工作正常。

但我想有我的事件處理程序在一個單獨的文件，所以我用這個來代替：

<head> 

<link href="default.css" rel="stylesheet" type="text/css" /> 
<link href="theme1.css" title="theme1" rel="stylesheet" type="text/css" /> 
<link href="theme2.css" title="theme2" rel="stylesheet" type="text/css" /> 
<link href="theme3.css" title="theme3" rel="stylesheet" type="text/css" /> 

</head> 

<body 

<ul id="dropdown"> 
<li> Choose theme 
    <ul> 
     <li id="stylesheet1" > <a href="#"> Default </a></li> 
     <li id="stylesheet2" > <a href="#"> Theme 1 </a></li> 
     <li id="stylesheet3" > <a href="#"> Theme 2 </a></li> 
     <li id="stylesheet4" > <a href="#"> Theme 3 </a></li> 
    </ul> 
</li> 

</body>

有了這個我javascript.js文件補充說：

function initate() 
{ 
var style1 = document.getElementById("stylesheet1"); 
var style2 = document.getElementById("stylesheet2"); 
var style3 = document.getElementById("stylesheet3"); 
var style4 = document.getElementById("stylesheet4"); 

style1.onclick = function() { 
    setActiveStyleSheet("default.css"); 
    return false; 
    }; 
style2.onclick = function() { 
    setActiveStyleSheet("theme1.css"); 
    return false; 
    }; 
style3.onclick = function() { 
    setActiveStyleSheet("theme2.css"); 
    return false 
    }; 
style4.onclick = function() { 
    setActiveStyleSheet("theme3.css"); 
    return false 
    };   
} 

window.onload = initate;

但對於有些原因，這不起作用，我不明白爲什麼。現在的方式是，我的default.css和theme1.css都被加載，當我按下列表中的任何按鈕時，theme1.css被禁用，當按下其他任何按鈕時，沒有其他事情發生。

來源

2013-01-12 Benji

你從工作那篇文章是在網絡的軟件** **古條款。 – Pointy

在哪個文件中定義了像'setActiveStyleSheet'這樣的函數？它是在HTML文件還是單獨的'.js'文件中？ – ATOzTOA

什麼是「不工作」？你有錯誤嗎？ – ATOzTOA

功能setActiveStyleSheet以title作爲參數。

這裏是工作代碼：

HTML

<head> 

<link href="default.css" title="default" rel="stylesheet" type="text/css" /> 
<link href="theme1.css" title="theme1" rel="stylesheet" type="text/css" /> 
<link href="theme2.css" title="theme2" rel="stylesheet" type="text/css" /> 
<link href="theme3.css" title="theme3" rel="stylesheet" type="text/css" /> 

</head>

的Javascript

style1.onclick = function() { 
    setActiveStyleSheet("default"); 
    return false; 
    }; 
style2.onclick = function() { 
    setActiveStyleSheet("theme1"); 
    return false; 
    }; 
style3.onclick = function() { 
    setActiveStyleSheet("theme2"); 
    return false 
    }; 
style4.onclick = function() { 
    setActiveStyleSheet("theme3"); 
    return false 
    };   
}

來源

2013-01-13 11:36:54 ATOzTOA

謝謝！一直拉着我的頭髮試圖弄清楚是錯的，我非常確定它是一個非常小的東西..我只有一個小的後續問題，我怎麼讓餅乾至少停留7天？ – Benji

Cookie有'expires'屬性，只需設置它 – ATOzTOA

我該怎麼做？我的JavaScript知識是非常基本的，我不明白這裏的大部分腳本:( – Benji

如何將事件處理程序存儲在單獨的文檔中

回答

相關問題