如何将事件处理程序存储在单独的文档中

我正在使用此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

如何将事件处理程序存储在单独的文档中

回答

相关问题