亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

問題：1.script放在head標簽中為什么就不行了？ 2.如果用obj.className=classname;的方法設置樣式，怎么取消樣式呢？

  1. 問題：script放在head標簽中為什么就不行了？

  2. 如果用obj.className=classname;的方法設置樣式，怎么取消樣式呢？

  3. 發現的問題：用getElementsByClassName（）以及getElementsByTagName的方法獲取對象進行樣式設置為什么不行？

    答：getElementsByClassName（）的方法獲取得到的是數組，試了getElementsByClassName（""）[0]可以。

正在回答

4 回答

  1. 不知道你的應用場景，如果放在body最下可執行，放在head中不能執行，那么在head的時候要放在window.onload函數來執行你的操作。

  2. 可以利用obj.className.replace(classname,' ');

0 回復 有任何疑惑可以回復我~
#1

MeJu 提問者

body下可執行，但是復制到head就不行了，加了window.onload也不行。我下面貼有代碼。謝謝您的解答。
2016-02-01 回復 有任何疑惑可以回復我~
#2

心雷forever 回復 MeJu 提問者

因為你放在body之后了。id為text才會被document.getElementById('text');獲取到。如果你像放到head里面也能正常執行。代碼這樣寫 var mydiv = null;window.onload = function(){mydiv = document.getElementById('text');} 把這里修改一下，其他地方不用變
2016-02-01 回復 有任何疑惑可以回復我~
#3

心雷forever 回復 MeJu 提問者

因為你這個例子是按鈕觸發的事件。我在下面給你貼正確代碼了。你自己看下吧
2016-02-01 回復 有任何疑惑可以回復我~
#4

MeJu 提問者 回復 心雷forever

OK了，萬分感謝?。?！灰常感謝！?。?/div>
2016-02-01 回復 有任何疑惑可以回復我~
查看2條回復

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>DOM改變樣式以及隱藏和顯示</title>

?<style type="text/css">

?.content{

? ? ? ? ? ? width:500px;

? ? ? ? ? ? height:500px;

? ? ? ? ? ? border:1px dotted black;

? ? ? ? }

? ? ? ? p{

? ? ? ? ? ? text-indent:2em;

? ? ? ? }

? ? ? ? input[type="button"]{

? ? ? ? ? ? display:inline-block;

? ? ? ? ? ? margin-right:14px;

? ? ? ? }

?</style>

? ? <script type="text/javascript">

?var mydiv = null;

?window.onload = function(){

? mydiv =document.getElementById("text");


?}

?//定義"改變顏色"的函數

?function changeColor(){

?mydiv.style.backgroundColor="red";

?}

?//定義"改變寬高"的函數

?function changeSize(){

?mydiv.style.width="200px";

?mydiv.style.height="300px";

? ? }

?//定義"隱藏內容"的函數

?function hidetext(){

?mydiv.style.display="none";

? ? }

?//定義"顯示內容"的函數

?function showtext(){

?mydiv.style.display="block";

? ? }

?//定義"取消設置"的函數

?function resettext(){

?var mychose = confirm("確定取消樣式？");

?if(mychose==true){

mydiv.removeAttribute("style");

}

?}

</script>

</head>

<body>

<h2>JavaScript課程</H2>

<div id="text">

? ? <h5>JavaScript為網頁添加動態效果并實現與用戶交互的功能。</h5>

? ? <p>1. JavaScript入門篇，讓不懂JS的你，快速了解JS。</p>

? ? <p>2. JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>

? ? <p>3. 學完以上兩門基礎課后，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>

</div>

<form>

?<!--當點擊相應按鈕，執行相應操作，為按鈕添加相應事件-->

?<input type="button" value="改變顏色" onclick="changeColor()">

? ? <input type="button" value="改變寬高" onclick="changeSize()">

? ? <input type="button" value="隱藏內容" onclick="hidetext()">

? ? <input type="button" value="顯示內容" onclick="showtext()">

? ? <input type="button" value="取消設置" onclick="resettext()">

</form>

</body>

</html>


0 回復 有任何疑惑可以回復我~ 
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>DOM改變樣式以及隱藏和顯示</title>
?<style?type="text/css">
?.content{
????????????width:500px;
????????????height:500px;
????????????border:1px?dotted?black;
????????}
????????p{
????????????text-indent:2em;
????????}
????????input[type="button"]{
????????????display:inline-block;
????????????margin-right:14px;
????????}
?</style>
????<script?type="text/javascript">
?var?mydiv?=document.getElementById("text")?
?//定義"改變顏色"的函數
?function?changeColor(){
?mydiv.style.backgroundColor="red";
?}
?//定義"改變寬高"的函數
?function?changeSize(){
?mydiv.style.width="200px";
?mydiv.style.height="300px";
????}
?//定義"隱藏內容"的函數
?function?hidetext(){
?mydiv.style.display="none";
????}
?//定義"顯示內容"的函數
?function?showtext(){
?mydiv.style.display="block";
????}
?//定義"取消設置"的函數
?function?resettext(){
?var?mychose?=?confirm("確定取消樣式？");
?if(mychose==true){
?mydiv.removeAttribute("style");
?}
</script>
</head>
<body>
<h2>JavaScript課程</H2>
<div?class="content"?id="text">
????<h5>JavaScript為網頁添加動態效果并實現與用戶交互的功能。</h5>
????<p>1.?JavaScript入門篇，讓不懂JS的你，快速了解JS。</p>
????<p>2.?JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
????<p>3.?學完以上兩門基礎課后，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
</div>
<form>
?<!--當點擊相應按鈕，執行相應操作，為按鈕添加相應事件-->
?<input?type="button"?value="改變顏色"?onclick="changeColor()">
????<input?type="button"?value="改變寬高"?onclick="changeSize()">
????<input?type="button"?value="隱藏內容"?onclick="hidetext()">
????<input?type="button"?value="顯示內容"?onclick="showtext()">
????<input?type="button"?value="取消設置"?onclick="resettext()">
</form>
</body>
</html>


0 回復 有任何疑惑可以回復我~
#1

心雷forever

你resettext方法少了個結尾的花括號
2016-02-01 回復 有任何疑惑可以回復我~

  1. 可能是script中的代碼有錯誤

  2. 可以用obj.removeAttribute("class","相應的類名");

  3. getElement后面不加s的是獲得單個對象可以直接調用相關的方法，加s的是獲取的對象數組要用索引來調用相應的方法

0 回復 有任何疑惑可以回復我~
#1

MeJu 提問者

可能有錯誤吧，但是沒發現。。。謝謝您的解答。
2016-02-01 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

問題：1.script放在head標簽中為什么就不行了？ 2.如果用obj.className=classname;的方法設置樣式，怎么取消樣式呢？

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號