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

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

關于設置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的樣式了。

正在回答

2 回答

<!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>


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

JSAL 提問者

能理解一些了!非常感謝??!
2015-02-23 回復 有任何疑惑可以回復我~

用等于號。

target.className="reset";


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

JSAL 提問者

你好 謝謝回答 ! 不過用等號也是無效的(剛剛試了一下),在前面的一個反應相似問題的討論中看到的回答(如下): “這個,如果你前面是改變的className的話,那么最后這個重置是可以這樣寫的,但是如果你前面是直接調用元素的style屬性來修改的話,那么再用這個就不行了 by血舞殘殤” 只是不太清楚這個回答的知識點,如果有知道的人希望能幫忙講解一下或者給一下相關的知識點我可以去查一查。謝謝!
2015-02-21 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

關于設置className的疑問

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

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

幫助反饋 APP下載

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

公眾號

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