2015-03-03 65 views
0

因此,我仍然想出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 &#183; 300 Mountain Lane &#183; Boise, Idaho 83702 &#183; (208) 555 - 9114 
 
    </address> 
 

 

 
    </div> 
 

 
    </form> 
 
</body> 
 

 
</html>

+0

這行使用'marqueeTxt [I]',但它不是'的(我...)'循環中。 – Barmar 2015-03-03 05:23:43

+0

如果您正確縮進您的代碼,我認爲這將是顯而易見的。 – Barmar 2015-03-03 05:24:27

回答

0

使用marqueeTxt[i]需要是for(var i)循環中的代碼。

這將修復該錯誤。選框仍然不滾動,因爲marqueeTxt[i].style.top爲空。 defineMarquee()嘗試設置此方法不起作用。當我通過它時,既沒有定義getComputedStyle也沒有定義currentStyle,所以它跳過了設置topValue的兩種方法。

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 &#183; 300 Mountain Lane &#183; Boise, Idaho 83702 &#183; (208) 555 - 9114 
 
    </address> 
 

 

 
    </div> 
 

 
    </form> 
 
</body> 
 

 
</html>

+0

邪惡......我對這一切都很陌生,這確實將我對JavaScript的有限知識推向了極限。你有什麼想法爲什麼文本不是垂直向上移動字幕。我想保存topValue變量中文本的頂部屬性,並將該值存儲在marqueeTxt數組中當前項的頂部樣式屬性中,然後在moveText()中調用該值。誠實地,任何幫助一切都會很棒! – 2015-03-03 05:43:01

+0

我解釋了爲什麼它不在我的答案中滾動。你從不在'defineMarquee'中設置'.style.top',因爲'getComputedStyle'和'currentStyle'都不存在。 – Barmar 2015-03-03 05:50:14

+0

查看@ aboutqx關於如何正確獲取樣式的答案。 – Barmar 2015-03-03 05:52:07

0

上面幾乎是正確的,但仍然有error.Change if(marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top") } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); }

topValue=getStyle(marqueeTxt[i],'top');, 並添加

function getStyle(elem,name){ 
    //如果屬性存在於style[]中,那麼他已被設置了,並是最終的 
    if(elem.style[name]) 
    return elem.style[name]; 
    //否則嘗試ie的辦法 
    else if(elem.currentStyle) 
    return elem.currentStyle[name]; 
    //或者w3c的方法,如果存在的話 
    else if(document.defaultView&&document.defaultView.getComputedStyle){ 
    name=name.replace(/([A-Z])/g,"-$1"); 
    name=name.toLowerCase(); 
    var s=document.defaultView.getComputedStyle(elem,''); 
    return s&&s.getPropertyValue(name); 
    }//否則用戶使用的是其他瀏覽器,返回null 
    else return null; 
} 

那麼該文件將正常工作。

0

所以我設法解決這個感謝.getComputedStyle方法。 謝謝你讓我走上正確的道路。

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 = 0; 
 

 
    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 (window.getComputedStyle) { 
 
     topValue = document.defaultView.getComputedStyle(marqueeTxt[i]).getPropertyValue("top");} 
 
     else if (marqueeTxt[i].currentStyle) { 
 
     topValue = document.defaultView.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 &#183; 300 Mountain Lane &#183; Boise, Idaho 83702 &#183; (208) 555 - 9114 
 
    </address> 
 

 

 
    </div> 
 

 
</form> 
 
</body> 
 
</html>

相關問題