因此,我仍然想出typeError:無法讀取屬性'樣式'未定義。 它位於javascript的最後一行。 任何任何建議。 完成的作品將成爲垂直滾動文字的選取框。滾動選框未捕獲TypeError:無法讀取屬性'樣式'未定義
window.onload = defineMarquee;
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
/* defineMarquee()
Initializes the contents of the marquee, determines the
top style positions of each marquee item, and sets the
onclick event handlers for the document
*/
function defineMarquee() {
var topValue
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}
//Extract the "top" CSS class from marqueeTxt
for (var i = 0; i < marqueeTxt.length; i++) {
if (marqueeTxt[i].getComputedStyle) {
topValue = marqueeTxt[i].getPropertyValue("top")
} else if (marqueeTxt[i].currentStyle) {
topValue = marqueeTxt[i].currentStyle("top");
}
marqueeTxt[i].style.top = topValue;
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
/* startMarquee()
Starts the marquee in motion
*/
function startMarquee() {
if (marqueeOff == true) {
timeID = setInterval("moveText()", 50);
marqueeOff = false;
}
}
/* stopMarquee()
Stops the Marquee
*/
function stopMarquee() {
clearInterval(timeID);
marqueeOff = true;
}
/* moveText()
move the text within the marquee in a vertical direction
*/
function moveText() {
for (var i = 0; i < marqueeTxt.length; i++) {
topPos = parseInt(marqueeTxt[i].style.top);
}
if (topPos < -110) {
topPos = 700;
} else {
topPos -= 1;
}
marqueeTxt[i].style.top = topPos + "px";
}
* {
margin: 0px;
padding: 0px
}
body {
font-size: 15px;
font-family: Arial, Helvetica, sans-serif
}
#pageContent {
position: absolute;
top: 0px;
left: 30px;
width: 800px
}
#links {
display: block;
width: 100%;
margin-bottom: 20px;
border-bottom: 1px solid rgb(0, 153, 102);
float: left
}
#links {
list-style-type: none
}
#links li {
display: block;
float: left;
text-align: center;
width: 19%
}
#links li a {
display: block;
width: 100%;
text-decoration: none;
color: black;
background-color: white
}
#links li a:hover {
color: white;
background-color: rgb(0, 153, 102)
}
#leftCol {
clear: left;
float: left
}
h1 {
font-size: 24px;
letter-spacing: 5px;
color: rgb(0, 153, 102)
}
#main {
float: left;
width: 450px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid rgb(0, 153, 102);
padding-bottom: 15px
}
#main img {
float: right;
margin: 0px 0px 10px 10px
}
#main p {
margin-bottom: 10px
}
address {
width: 100%;
clear: left;
font-style: normal;
font-size: 12px;
border-top: 1px solid black;
text-align: center;
padding-bottom: 15px
}
.marquee {
position: absolute;
top: 0px;
left: 0px;
width: 280px;
height: 300px;
background-color: rgb(0, 153, 102);
color: white;
border: 5px inset white;
padding: 0px;
overflow: hidden;
position: relative
}
#marqueeTxt1 {
font-size: 1.4em;
letter-spacing: 0.15em;
border-bottom: 1px solid white
}
input {
width: 120px;
margin: 5px;
font-size: 0.9em
}
#marqueeButtons {
width: 280px;
text-align: center
}
#marqueeTxt1 {
position: absolute;
top: 40px;
left: 20px
}
#marqueeTxt2 {
position: absolute;
top: 90px;
left: 20px
}
#marqueeTxt3 {
position: absolute;
top: 170px;
left: 20px
}
#marqueeTxt4 {
position: absolute;
top: 250px;
left: 20px
}
#marqueeTxt5 {
position: absolute;
top: 330px;
left: 20px
}
#marqueeTxt6 {
position: absolute;
top: 410px;
left: 20px
}
#marqueeTxt7 {
position: absolute;
top: 490px;
left: 20px
}
#marqueeTxt8 {
position: absolute;
top: 570px;
left: 20px
}
#marqueeTxt9 {
position: absolute;
top: 640px;
left: 20px
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Case Problem 3
BYSO Web Page
Author: Gavin Macken
Date: 28 Feb `15
Filename: byso.htm
Supporting files: bstyles.css, byso.jpg, bysologo.jpg, marquee.js
-->
<title>Boise Youth Symphony Orchestra</title>
<link href="bstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="marquee.js"></script>
</head>
<body>
<form id="marqueeForm" action="">
<div id="pageContent">
<div id="head">
<img src="bysologo.jpg" alt="Boise Youth Symphony Orchestra" />
</div>
<ul id="links">
<li><a href="#">Home Page</a>
</li>
<li><a href="#">About BYSO</a>
</li>
<li><a href="#">Our Director</a>
</li>
<li><a href="#">Join BYSO</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
<div id="leftCol">
<div class="marquee">
<div id="marqueeTxt1" class="marqueeTxt">
Schedule of Events
</div>
<div id="marqueeTxt2" class="marqueeTxt">
Holiday Concert
<br />December 14, 7:30 PM
<br />Boise Civic Center
</div>
<div id="marqueeTxt3" class="marqueeTxt">
Christmas Concert
<br />Dec. 16, 7 PM
<br />Our Savior Episcopal Church
</div>
<div id="marqueeTxt4" class="marqueeTxt">
Spring Concert
<br />Feb. 27, 7 PM
<br />Boise Civic Center
</div>
<div id="marqueeTxt5" class="marqueeTxt">
Easter Fanfare
<br />March 14, 9 PM
<br />Our Savior Episcopal Church
</div>
<div id="marqueeTxt6" class="marqueeTxt">
High School MusicFest
<br />May 2, 3 PM
<br />Boise Central High School
</div>
<div id="marqueeTxt7" class="marqueeTxt">
Summer Concert
<br />June 15, 7:30 PM
<br />Frontier Concert Hall
</div>
<div id="marqueeTxt8" class="marqueeTxt">
Fourth Fest
<br />July 4, 4 PM
<br />Canyon View Park
</div>
<div id="marqueeTxt9" class="marqueeTxt">
Frontier Days
<br />August 9, 1 PM
<br />Boise Concert Hall
</div>
</div>
<div id="marqueeButtons">
<input type="button" id="startMarquee" value="Start Marquee" />
<input type="button" id="stopMarquee" value="Pause Marquee" />
</div>
</div>
<div id="main">
<h1>Boise Youth Symphony Orchestra</h1>
<img src="byso.jpg" alt="" />
<p>The Boise Youth Symphony Orchestra has delighted audiences worldwide with beautiful music while offering the highest quality musical training to over 1,000 teens throughout Idaho for the past 30 years. BYSO has established an outstanding reputation
for its high quality sound, its series of commissioned works, and collaborations with prominent musical groups such as the Idaho and Boise Symphony Orchestras, the Montana Chamber Orchestra, the Boise Adult Choir and the Western Symphony Orchestra.
Last year the group was invited to serve as the U.S. representative to the 7th Annual World Festival of youth orchestras in Poznan, Poland.</p>
<p>Leading this success for the past decade has been Boise Symphony artistic director Denise Young. In a concert review by John Aehl, music critic for the <i>Boise Times</i>, Roger Adler writes, "It is a pleasure to report that the orchestra is playing
better than ever."</p>
</div>
<address>
BYSO · 300 Mountain Lane · Boise, Idaho 83702 · (208) 555 - 9114
</address>
</div>
</form>
</body>
</html>
這行使用'marqueeTxt [I]',但它不是'的(我...)'循環中。 – Barmar 2015-03-03 05:23:43
如果您正確縮進您的代碼,我認爲這將是顯而易見的。 – Barmar 2015-03-03 05:24:27