關于設置className的疑問
問題更新:前面寫急寫錯了,將82行的等號寫成了冒號,不過改成冒號后還是存在設置className無效的問題。
如果要測試運行的話,因為附帶代碼部分似乎不支持原作者修改保存,所以請記得將82行改成target.className="reset";再做自己的修改,謝謝!
問題描述:
關于這個代碼 我在第82行代碼用className實現重置發現無效,不知道是什么原因,想請教一下老師和同學,謝謝!
具體說明:
我把reset樣式寫成
.reset{
display:"block";
width:"600px";
height:"400px";
color:"black";
background-color:"white";
}
假設我前面修改的是id為target的部分,在cancel函數里寫:
target.className="reset";
alert("重置成功");
結果是:alert能執行,但target部分的樣式沒有改變,也就不是reset的樣式了。
2015-02-22
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?Content="text/html;?charset=utf-8"?/> <title>javascript</title> <style?type="text/css"> ??body?{?font-size:12px;?} ??#txt?{ ????height:?400px; ????width:?600px; ????border:?#333?solid?1px; ????padding:?5px; ??} ??p?{ ????line-height:?18px; ????text-indent:?2em; ??} ??/*默認類樣式*/ ??/*?!!樣式聲明不必使用雙引號?*/ ??.reset?{ ????display:?block; ????width:?600px; ????height:?400px; ????color:?black; ????background-color:?white; ??} </style> </head> <body> ??<h2?id="con">JavaScript課程</h2> ??<div?id="txt">? ?????<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="hide()"> ????<input?type="button"?value="顯示內容"?onclick="show()"> ????<input?type="button"?value="取消設置"?onclick="cancel()"> ??</form> ??<script?type="text/javascript"> ????//改變的目標 ????var?target?=?document.getElementById("txt"); ????//測試 ????//定義"改變顏色"的函數 ????function?changeColor()?{ ????????var?fc?=?prompt("請輸入字體顏色:"); ????????target.style.color?=?fc; ????} ????//定義"改變寬高"的函數 ????function?changeSize()?{ ????????var?wid?=?prompt("請輸入寬度:"); ????????target.style.width?=?wid?+?"px"; ????????var?hei?=?prompt("請輸入高度:"); ????????target.style.height?=?hei?+?"px"; ????} ????//定義"隱藏內容"的函數 ????function?hide()?{ ????????target.style.display?=?'none'; ????} ????//定義"顯示內容"的函數 ????function?show()?{ ????????target.style.display?=?'block'; ????} ????//定義"取消設置"的函數 ????function?cancel(){ ????????var?reset?=?confirm("是否需要重置?"); ????????if(reset==true)?{ ????????????target.className?=?"reset"; ????????????//?!!內聯的樣式比外聯樣式優先級高,所以重置要先remove掉style這個attribute,以免內聯樣式覆蓋掉.reset的樣式 ????????????target.removeAttribute('style'); ????????????alert("重置成功"); ????????} ????} ??</script> </body> </html>2015-02-21
用等于號。