12.1 使用可折叠菜单
可折叠菜单（ sliding menu）是一种简单的用户界面组件，可以利用它在页面上放置许多信息，同时又不会使页面显得太混乱。用户每次可以只在需要时查看他们想要看的额外信息。
<!DOCTYPE html>
<html>
<head>
<title>Shakespeare's Plays</title>
<link rel="stylesheet" href="script01.css">
<script src="script01.js"></script>
</head>
<body>
<h1>Shakespeare's Plays</h1>
<div>
<a href="menu1.html" class="menuLink">Comedies</a>
<ul class="menu" id="menu1">
<li><a href="pg1.html">All's Well That Ends Well</a></li>
<li><a href="pg2.html">As You Like It</a></li>
<li><a href="pg3.html">Love's Labour's Lost</a></li>
<li><a href="pg4.html">The Comedy of Errors</a></li>
</ul>
</div>
<div>
<a href="menu2.html" class="menuLink">Tragedies</a>
<ul class="menu" id="menu2">
<li><a href="pg5.html">Anthony & Cleopatra</a></li>
<li><a href="pg6.html">Hamlet</a></li>
<li><a href="pg7.html">Romeo & Juliet</a></li>
</ul>
</div>
<div>
<a href="menu3.html" class="menuLink">Histories</a>
<ul class="menu" id="menu3">
<li><a href="pg8.html">Henry IV, Part 1</a></li>
<li><a href="pg9.html">Henry IV, Part 2</a></li>
</ul>
</div>
</body>
</html>
body {
background-color: #FFF;
color: #000;
}
div {
margin-bottom: 10px;
}
ul.menu {
display: none;
list-style-type: none;
margin-top: 5px;
}
a.menuLink {
font-size: 1.2em;
font-weight: bold;
}
window.addEventListener("load",initAll,false);
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].addEventListener("click",toggleMenu,flase);
}
}
}
function toggleMenu(evt) {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
var thisMenuStyle = document.getElementById(thisMenuName).style;
if (thisMenuStyle.display == "block") {
thisMenuStyle.display = "none";
}
else {
thisMenuStyle.display = "block";
}
evt.preventDefault();
}
var startMenu = this.href.lastIndexOf(“/”)+1;
var stopMenu = this.href.lastIndexOf(“.”);
在 toggleMenu()中， JavaScript 给出了 this。在这里， this 是用户单击的链接对象， 因此 this.href是完整的链接 URL。但是，我们只需要最后一个正斜杠和最后一个点号之间的部分（也就是说，如果链接指向http://www.javascriptworld.com/index.html，那么我们只需要 index），所以我们创建 startMenu和 stopMenu 变量，并且将它们设置为 this.href 中的两个位置，我们将根据这两个位置找到组成菜单名的字符串。
12.2 添加下拉菜单
body {
background-color: #FFF;
color: #000;
}
div {
margin-bottom: 10px;
width: 15em;
background-color: #9CF;
}
ul.menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li {
font: 1em arial, helvetica, sans-serif;
padding-left: 10px;
}
a.menuLink, li a {
text-decoration: none;
color: #006;
}
a.menuLink {
font-size: 1.2em;
font-weight: bold;
}
ul.menu li a:hover {
background-color: #006;
color: #FFF;
padding-right: 10px;
}
window.addEventListener("load",initAll,false);
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].addEventListener("mouseover",toggleMenu,false);
allLinks[i].addEventListener("click",clickHandler,false);
}
}
}
function clickHandler(evt) {
evt.preventDefault();
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
var menuParent = document.getElementById(thisMenuName).parentNode;
var thisMenuStyle = document.getElementById(thisMenuName).style;
thisMenuStyle.display = "block";
menuParent.addEventListener("mouseout",function() {thisMenuStyle.display = "none";},false);
menuParent.addEventListener("mouseover",function() {thisMenuStyle.display = "block";},false);
}
12.3 改进下拉菜单
你还可能希望给习惯使用键盘进行导航的用户提供一些方便
body {
background-color: #FFF;
color: #000;
}
div {
margin-bottom: 10px;
width: 15em;
background-color: #9CF;
float: left;
}
ul.menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li {
font: 1em arial, helvetica, sans-serif;
padding-left: 10px;
}
a.menuLink, li a {
text-decoration: none;
color: #006;
}
a.menuLink {
font-size: 1.2em;
font-weight: bold;
}
ul.menu li a:hover {
background-color: #006;
color: #FFF;
padding-right: 10px;
}
window.addEventListener("load",initAll,false);
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].addEventListener("mouseover",toggleMenu,false);
allLinks[i].addEventListener("click",clickHandler,false);
}
}
}
function clickHandler(evt) {
if (evt) {
evt.preventDefault();
if (typeof evt.target == "string") {
toggleMenu(evt,evt.target);
}
else {
toggleMenu(evt,evt.target.toString());
}
}
else {
toggleMenu(evt,window.event.srcElement.href);
}
}
function toggleMenu(evt,currMenu) {
if (toggleMenu.arguments.length < 2) {
var currMenu = this.href;
}
var startMenu = currMenu.lastIndexOf("/")+1;
var stopMenu = currMenu.lastIndexOf(".");
var thisMenuName = currMenu.substring(startMenu,stopMenu);
var menuParent = document.getElementById(thisMenuName).parentNode;
var thisMenuStyle = document.getElementById(thisMenuName).style;
thisMenuStyle.display = "block";
menuParent.addEventListener("mouseout",function() {thisMenuStyle.display = "none";},false);
menuParent.addEventListener("mouseover",function() {thisMenuStyle.display = "block";},false);
}12.3 改进下拉菜单 231
1
2
这段代码负责处理菜单的显示和隐藏，因为单击和鼠标移动都可以触发菜单的显示，所以toggleMenu()比较复杂。这个函数有两个参数，但是 JavaScript 的函数有一个重要的特点：即使函数期望传递两个参数，也并不意味着必须传递两个参数。实际上，由于我们编写 toggleMenu()的方式，它可以应对 3 种情况。
当浏览器是 IE 并通过鼠标触发 toggleMenu()时，不传递参数。
当浏览器不是 IE 并通过鼠标触发 toggleMenu()时，传递一个参数（ event 对象）。
当通过 clickHandler()调用 toggleMenu()时，传递两个参数（ event 对象和菜单名）。
如果不传递参数或只传递一个参数（可以通过查看 toggleMenu.arguments.length 来检查），就说明可以通过 this.href 找到菜单名，换句话说，应该采用与以前一样的方式。但是，因为需要这个值在 currMenu 中，所以要存储它
12.4 带说明的幻灯片
<!DOCTYPE html>
<html>
<head>
<title>Our Summer Vacation!</title>
<link rel="stylesheet" href="script04.css">
<script src="script04.js"></script>
</head>
<body>
<h1>Our Summer Vacation Slideshow</h1>
<img src="images/slideImg0.jpg" alt="Our Vacation Pix" id="slideshow">
<div id="imgText"> </div>
<form id="chgImg">
<input type="button" id="prevLink" value="« Previous">
<input type="button" id="nextLink" value="Next »">
</form>
</body>
</html>
body {
background-color: #FFF;
color: #000;
font: 12px verdana, arial, helvetica, geneva, sans-serif;
}
h1 {
font: 24px "trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
margin-left: 100px;
}
#chgImg {
margin-left: 100px;
clear: both;
}
#slideshow {
padding: 0 10px 10px 10px;
float: left;
height: 240px;
width: 320px;
}
#imgText {
padding: 10px 0 0 10px;
float: left;
width: 200px;
height: 150px;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
window.addEventListener("load",initAll,false);
var currImg = 0;
var captionText = [
"Our ship, leaving Vancouver.",
"We took a helicopter ride at our first port, Juneau.",
"The helicopter took us to Mendenhall Glacier.",
"The happy (and chilly) couple, on the glacier.",
"Here's what our second stop, Ketchikan, looked like from the ship.",
"We got to cruise through Glacier Bay. It was absolutely breathtaking!",
"In Skagway, we took a train up into the mountains, all the way to the Canadian Border.",
"Looking back down at Skagway from the train.",
"On a trip this romantic, I shouldn't have been surprised by a proposal, but I was (obviously,I said yes).",
"It's nice to go on vacation, but it's nice to be home again, too."
];
function initAll() {
document.getElementById("imgText").innerHTML = captionText[currImg];
document.getElementById("prevLink").addEventListener("click",function() {newSlide(-1);},false);
document.getElementById("nextLink").addEventListener("click",function() {newSlide(1);},false);
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
}
12.5 一个娱乐姓名生成器
<!DOCTYPE html>
<html>
<head>
<title>Silly Name Generator</title>
<script src="script05.js"></script>
</head>
<body>
<h1>What's your silly name?</h1>
<table>
<tr>
<td class="rtAlign">First Name:</td>
<td><input type="text" id="fName" size="30"></td>
</tr>
<tr>
<td class="rtAlign">Last Name:</td>
<td><input type="text" id="lName" size="30"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit" id="sillySubmit"></td>
</tr>
</table>
<p id="msgField"> </p>
</body>
</html>
window.addEventListener("load",initAll,false);
function initAll() {
document.getElementById("sillySubmit").addEventListener(
"click",
function() {
document.getElementById("msgField").innerHTML = getSillyName();
return false;
},
false
);
}
function getSillyName() {
var firstName = ["Runny", "Buttercup","Dinky", "Stinky", "Crusty", "Greasy","Gidget", "Cheesypoof", "Lumpy","Wacky", "Tiny", "Flunky", "Fluffy","Zippy", "Doofus", "Gobsmacked","Slimy", "Grimy", "Salamander","Oily", "Burrito", "Bumpy", "Loopy","Snotty", "Irving", "Egbert"];
var lastName1 = ["Snicker", "Buffalo","Gross", "Bubble", "Sheep", "Corset","Toilet", "Lizard", "Waffle","Kumquat", "Burger", "Chimp", "Liver","Gorilla", "Rhino", "Emu", "Pizza","Toad","Gerbil", "Pickle", "Tofu","Chicken", "Potato", "Hamster","Lemur", "Vermin"];
var lastName2 = ["face", "dip", "nose","brain", "head", "breath", "pants","shorts", "lips", "mouth", "muffin","butt", "bottom", "elbow", "honker","toes", "buns", "spew", "kisser","fanny", "squirt", "chunks", "brains","wit", "juice", "shower"];
var firstNm = document.getElementById("fName").value.toUpperCase();
var lastNm = document.getElementById("lName").value.toUpperCase();
var validName = true;
if (firstNm == "") {
validName = false;
}
else {
var firstNum = firstNm.charCodeAt(0) - 65;
if (firstNum < 0 || firstNum > 25) {
validName = false;
}
}
if (!validName) {
document.getElementById("fName").focus();
document.getElementById("fName").select();
return "That's not a valid first name";
}
if (lastNm == "") {
validName = false;
}
else {
var lastNum1 = lastNm.charCodeAt(0) - 65;
var lastNum2 = lastNm.charCodeAt(lastNm.length-1) - 65;
if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) {
validName = false;
}
}
if (!validName) {
document.getElementById("lName").focus();
document.getElementById("lName").select();
return "That's not a valid last name";
}
return "Your silly name is " + firstName [firstNum] + " " + lastName1[lastNum1] + lastName2
[lastNum2];
}
12.6 柱状图生成器
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart Display</title>
<link rel="stylesheet" href="script06.css">
<script src="script06.js"></script>
</head>
<body>
<div id="chartType">
Choose a chart:<br>
<input type="radio" name="type" value="browser" checked>Browser Usage<br>
<input type="radio" name="type" value="platform"> Mobile Device Vendors<br>
<p><br></p>
Choose a color:<br>
<input type="radio" name="color" value="lilRed.gif" checked> Red<br>
<input type="radio" name="color" value="lilGreen.gif"> Green<br>
<input type="radio" name="color" value="lilBlue.gif"> Blue<br>
<p><br></p>
Choose a direction:<br>
<input type="radio" name="direction" value="horizontal" checked> Horizontal<br>
<input type="radio" name="direction" value="vertical"> Vertical
</div>
<div id="chartArea"> </div>
</body>
</html>
body {
background-color: #FFF;
color: #000;
font-size: 12px;
}
#chartType {
float: left;
width: 200px;
}
th {
font-size: 16px;
padding-left: 20px;
padding-right: 15px;
}
.horiz th {
border-right: 1px #000 solid;
}
.horiz img {
height: 15px;
vertical-align: bottom;
margin-right: 10px;
}
.vert {
text-align: center;
vertical-align: bottom;
}
.vert th {
border-left: 1px #000 solid;
border-bottom: 1px #000 solid;
}
.vert img {
width: 15px;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
}
window.addEventListener("load",initAll,false);
function initAll() {
var radioButtons = document.getElementsByTagName("input");
for (var i=0; i<radioButtons.length;i++) {
if (radioButtons[i].type == "radio") {
radioButtons[i].addEventListener("click",chgChart,false);
}
}
chgChart();
}
function chgChart() {
var bChart = {
name: "Desktop browser usage by year",
years: [2010,2011,2012,2013,2014],
fieldnames: ["MS IE","Firefox","Chrome"],
fields: [
[51.45,42.93,33.74,29.25,24.5],
[31.27,28.2,24.15,20.82,20.53],
[10.25,21.08,33.23,42.63,46.6]
]
}
var mobiChart = {
name: "Mobile device vendors by year",
years: [2010,2011,2012,2013,2014],
fieldnames: ["Nokia","Apple","Samsung","RIM"],
fields: [
[36.93,38.44,29.27,21.4,17.6],
[28.88,27.51,24.39,24.01,23.23],
[4.5,11,18.96,25.47,29.39],
[19.78,14.38,5.22,3.65,2.87]
]
}
var radioButtons = document.getElementsByTagName("input");
var currDirection = getButton("direction");
var imgSrc = "images/" + getButton("color");
if (getButton("type")=="browser") {
var thisChart = bChart;
}
else {
var thisChart = mobiChart;
}
var chartBody = "<h2>"+thisChart.name+"</h2><table>";
for (var i=0; i<thisChart.years.length;i++) {
if (currDirection == "horizontal") {
chartBody += "<tr class='horiz'><th rowspan="+(thisChart.fieldnames.length+1);
chartBody += ">"+thisChart.years[i]+"</th><td colspan=2></td></tr>";
for (var j=0; j<thisChart.fieldnames.length; j++) {
chartBody += "<tr class='horiz'><td>"+thisChart.fieldnames[j];
chartBody += "</td><td><img alt='horiz bar' src='"+imgSrc;
chartBody += "' width="+thisChart.fields[j][i]*3+">";
chartBody += thisChart.fields[j][i]+"</td></tr>";
}
}
else {
chartBody += "<tr class='vert'><th rowspan=2>"+thisChart.years[i]+"</th>";
for (var j=0; j<thisChart.fieldnames.length; j++) {
chartBody += "<td><img alt='vert bar' src='"+imgSrc;
chartBody += "' height="+thisChart.fields[j][i]*3+"'></td>";
}
chartBody += "</tr><tr class='vert'>";
for (j=0; j<thisChart.fieldnames.length; j++) {
chartBody += "<td>"+thisChart.fields[j][i]+"<br>";
chartBody += thisChart.fieldnames[j]+"</td>";
}
chartBody += "</tr>";
}
}
chartBody += "</table>";
document.getElementById("chartArea").innerHTML = chartBody;
function getButton(buttonSet) {
for (var i=0; i<radioButtons.length;i++) {
if (radioButtons[i].name == buttonSet && radioButtons[i].checked) {
return radioButtons[i].value;
}
}
return -1;
}
}
12.7 样式表切换器
JavaScript 最强大的用途之一是，在运行时改变页面所使用的样式表。例如，可以向站点的访问者提供样式选项，从而允许他们选择站点上文本的样式和大小。
<!DOCTYPE html>
<html>
<head>
<title>Style Changer</title>
<link href="script07.css" rel="stylesheet">
<link href="sansStyle.css" rel="stylesheet" title="default">
<link href="serifStyle.css" rel="alternate stylesheet" title="serif">
<script src="script07.js"></script>
</head>
<body>
<div class="navBar"><p>Change your font:</p>
<input type="button" id="default" class="sansBtn" value="Sm Sans"
<input type="button" id="serif" class="serifBtn" value="Lg Serif">
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean lacus elit, volutpat vitae,
➝ egestas in, tristique ut, nibh. Donec congue lacinia magna. Duis tortor justo,dapibus vel,
➝ vulputate sed, mattis sit amet, leo. Cras purus quam, semper quis, dignissim id, hendrerit eget,
➝ ante. Nulla id lacus eget nulla bibendum venenatis. Duis faucibus adipiscing mauris. Integer augue.
➝ In vulputate purus eget enim. Nam odio eros, porta vitae,bibendum sit amet, iaculis nec, elit. Cras
➝ egestas scelerisque pede. Donec a tellus. Nullam consectetuer fringilla nunc.</p>
<p>Nam varius metus congue ligula. In hac habitasse platea dictumst. In ut ipsum a pede rhoncus
➝ convallis. Sed at enim. Integer sed metus quis est egestas vestibulum. Quisque mattis tortor
➝ a lorem. Nam diam. Integer consequat lectus. Donec molestie elementum nisl. Donec ligula sapien,
➝ volutpat eget, dictum quis, mollis a, odio. Aliquam augue enim, gravida nec, tempor ac, interdum
➝ in, urna. Aliquam mauris. Duis massa urna, ultricies id,condimentum ac, gravida nec, dolor.
➝ Morbi et est quis enim gravida nonummy. Cum sociis natoque penatibus et magnis dis parturient
➝ montes, nascetur ridiculus mus. Mauris nisl quam,tincidunt ultrices, malesuada eget, posuere
➝ eu, lectus. Nulla a arcu. Sed consectetuer arcu et velit. Quisque dignissim risus vel elit.</p>
<p>Nunc massa mauris, dictum id, suscipit non, accumsan et, lorem. Suspendisse non lorem quis dui
➝ rutrum vestibulum. Quisque mauris. Curabitur auctor nibh non enim. Praesent tempor aliquam
➝ ligula. Fusce eu purus. Vivamus ac enim eget urna pulvinar bibendum. Integer porttitor, augue
➝ et auctor volutpat, lectus dolor sagittis ipsum, sed posuere lacus pede eget wisi. Proin vel
➝ arcu ac velit porttitor pellentesque. Maecenas mattis velit scelerisque tellus. Cras eu tellus
➝ quis sapien malesuada porta. Nunc nulla. Nullam dapibus malesuada lorem. Duis eleifend rutrum
➝ tellus. In tempor tristique neque. Mauris rhoncus. Aliquam purus.</p>
<p>Morbi felis quam, placerat sed, gravida a, bibendum a, mauris. Aliquam porta diam. Nam consequat
➝ feugiat diam. Fusce luctus, felis ut gravida mattis, ante mi viverra sapien, a vestibulum tellus
➝ lectus ut massa. Duis placerat. Aliquam molestie tellus. Suspendisse potenti. Fusce aliquot
➝ tellus a lectus. Proin augue diam, sollicitudin eget, hendrerit non, semper at, arcu. Sed
➝ suscipit tincidunt nibh. Donec ullamcorper. Nullam faucibus euismod augue. Cras lacinia. Aenean
➝ scelerisque, lorem sed gravida varius, nunc tortor gravida odio, sed sollicitudin pede augue
➝ ut metus. Maecenas condimentum ipsum et enim. Sed nulla. Ut neque elit, varius a, blandit quis,
➝ facilisis sed, velit. Suspendisse aliquam odio sed nibh.</p>
</body>
</html>
body {
margin: 0 20px;
padding: 0;
background-color: #FFF;
color: #000;
}
div.navBar {
background-color: #CCC;
width: 175px;
position: relative;
top: -20px;
right: -20px;
float: right;
padding: 20px 0 20px 20px;
border-left: 2px groove #999;
border-bottom: 2px groove #999;
}
.sansBtn {
font: 12px/13px verdana, geneva, arial, helvetica, sans-serif;
}
.serifBtn {
font: 16px/17px "Times New Roman", Times, serif;
}
body, p, td, ol, ul, select, span, div, input {
font: 12px/13px verdana, geneva, arial, helvetica, sans-serif;
}
window.addEventListener("load",initStyle,false);
window.addEventListener("unload",unloadStyle,false);
function initStyle() {
var thisCookie = cookieVal("style");
if (thisCookie) {
var title = thisCookie;
}
else {
var title = getPreferredStylesheet();
}
setActiveStylesheet(title);
var allButtons = document.getElementsByTagName("input");
for (var i=0; i<allButtons.length; i++) {
if (allButtons[i].type == "button") {
allButtons[i].addEventListener("click",setActiveStylesheet,false);
}
}
}
function unloadStyle() {
var expireDate = new Date();
expireDate.setYear(expireDate.getFullYear()+1);
document.cookie = "style=" + getActiveStylesheet() + ";expires=" + expireDate.toGMTString() +
➝ ";path=/";
}
function getPreferredStylesheet() {
var thisLink, relAttribute;
var linksFound = document.getElementsByTagName("link");
for (var i=0; i<linksFound.length; i++) {
thisLink = linksFound[i];
relAttribute = thisLink.getAttribute("rel");
if (relAttribute.indexOf("style") > -1 && relAttribute.indexOf("alternate") == -1 && thisLink.
➝ getAttribute("title")) {
return thisLink.getAttribute("title");
}
}
return "";
}
function getActiveStylesheet() {
var thisLink, relAttribute;
var linksFound = document.getElementsByTagName("link");
for (var i=0; i<linksFound.length; i++) {
thisLink = linksFound[i];
relAttribute = thisLink.getAttribute("rel");
if (relAttribute.indexOf("style") > -1 && thisLink.getAttribute("title") && !thisLink.disabled) {
return thisLink.getAttribute("title");
}
}
return "";
}
function setActiveStylesheet(inVal) {
var thisLink, relAttribute;
var linksFound = document.getElementsByTagName("link");
if (inVal) {
if (typeof inVal == "string") {
var title = inVal;
}
else {
var title = inVal.target.id;
}
}
else {
var title = window.event.srcElement.id;
}
for (var i=0; i<linksFound.length; i++) {
thisLink = linksFound[i];
relAttribute = thisLink.getAttribute("rel");
if (relAttribute.indexOf("style") > -1 && thisLink.getAttribute("title")) {
if (thisLink.getAttribute("title") == title) {
thisLink.disabled = false;
}
else {
thisLink.disabled = true;
}
}
}
}
function cookieVal(cookieName) {
var thisCookie = document.cookie.split("; ");
for (var i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1];
}
}
return "";
}
for (var i=0; i<linksFound.length;i++) {
thisLink = linksFound[i];
relAttribute = thisLink.getAttribute("rel");
if (relAttribute.indexOf("style") > -1 && relAttribute.indexOf("alternate") == -1 &&
➝ thisLink.getAttribute("title")) {
return thisLink.getAttribute("title");
}
}
这个函数遍历每个链接标签，检查它们是否有 rel 属性，这个属性的值是否包含 style，这个属性的值是否不包含 alternate，以及标签是否有 title 属性。如果找到符合所有这些条件的链接标签，它链接的就是首选样式表，所以返回它的 title 属性。为了了解代码中的哪个实际标签是首选样式表，看一下 HTML 文件中的 link 标签。虽然 HTML文件中有 3 个 link 标签，但是只有两个有 title 属性。在这两个 link 标签中，一个有 rel 属性 stylesheet，另一个的 rel 属性是 alternate stylesheet。因此，首选样式表是 title 属性为 default 的那个。
var thisLink, relAttribute;
var linksFound = document.getElementsByTagName("link");
if (inVal) {
if (typeof inVal == "string") {
var title = inVal;
}
else {
var title = inVal.target.id;
}
}
else {
var title = window.event.srcElement.id;
}
正如前面看到的，当用户加载这个页面时，调用 setActiveStylesheet()函数并且传递一个参数，这个参数在函数内称为 inVal。但是，在单击按钮之后也会调用 setActiveStylesheet()。在这种情况下，根据使用的浏览器和浏览器处理事件的方式，可能传递参数，也可能不传递。在这里进行检查，从而判断哪个函数调用了这个函数以及用户希望的操作。有以下 3 种可能的情况。
initStyle()调用了这个函数，并且传递给它一个包含首选样式表的字符串。在这种情况下，inVal 存在而且它是一个字符串，所以将 title 设置为 inVal。
在支持 W3C 样式事件的浏览器中单击了样式按钮。在这种情况下， inVal 自动设置为触发此函数的事件，所以 inVal 存在，但它不是字符串。当发生这种情况时，事件的 target（即导致触发事件的目标）就是被单击的按钮，这个按钮的 id 存储着所需的样式名称。
在不支持 W3C 标准但支持 IE 事件模型的浏览器中单击了样式按钮。如果是这种情况，那么inVal 变量不存在，所以要从window.event.srcElement.id 获得所需的样式。
thisLink = linksFound[i];
relAttribute = thisLink.getAttribute("rel");
if (relAttribute.indexOf("style") > -1 && thisLink.getAttribute("title")) {
if (thisLink.getAttribute("title") == title) {
thisLink.disabled = false;
}
else {
thisLink.disabled = true;
}
}
setActiveStylesheet()函数遍历文档中的所有链接标签，检查每个标签是否同时具有包含 style的 rel 属性和 title 属性。如果这两个条件都成立，那么首先禁用这个链接，然后在并且只在 title属性设置为 title 值的情况下重新启用它。所以，如果当前使用的样式表的 title 属性为default，而用户单击了 Lg Serif 按钮， JavaScript 就知道应该装载 serif 样式表。有一个 link 标签具有 title 属性 serif，所以禁用所有其他样式表（即这里的 default 样式表），只打开 serif 样式表。
2537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
