                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript入門篇

想用className來實現這個編程練習，結果發現沒反應

上一節講了一下className

然后這節我用常規的方法寫完了之后就想嘗試一下class Name。

發現這里class Name用不了

不知道為什么

求大神指教

simon_yms

2016-11-17

源自：JavaScript入門篇 4-1

關注問題我要回答

1145

操作

收起

7 回答

我不是管家回答被采納 +3 積分
2016-11-18

<!DOCTYPE HTML>

<html>

<head>

<title>javascript</title>

body{font-size:12px;}

#txt{

? ? height:400px;

? ? width:600px;

border:#333 solid 1px;

padding:5px;}

line-height:18px;

text-indent:2em;}

? ? .bt1{

? ? ? ? color:red;

? ? ? ? background:black;

? ? }

? ? .bt2{

? ? ? ? width:400px!important;

? ? ? ? height:500px!important;

? ? }

? ? .bt3{

? ? ? ? display:none;

? ? }

? ? .bt4{

? ? ? ? display:black;]

</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="bt1()";> ?

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

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

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

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

? </form>

? <script type="text/javascript">

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

? ?var oTxt=document.getElementById("txt");

? ? function bt1(){

? ? ? ? oTxt.className='bt1';

? ? }

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

function bt2(){

? ? ?oTxt.className='bt2';

}

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

function bt3(){

? ? oTxt.className='bt3';

}

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

function bt4(){

? ? oTxt.className='bt4';

}

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

function bt5(){

? ? oTxt.removeAttribute('style')

? ? ?var wid=confirm("是否取消設置？");

? ? ? ?if(wid==true){

? ? ? ? ? ?//oTxt.removeAttribute('style');

? ? ? ? ? ?oTxt.className='';

? ? ? ?}//取消設置恢復原狀

? ? ? ?else{

? ? ? ? ? ?alert("您未取消設置");

? ? ? ?}

? ? }

? </script>

</body>

</html>

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

收起回答

qq_厭倦的傷痛_04407504
2016-11-18

類名是什么？原文沒用定義類的，直接是id

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

收起回答

慕粉4205477
2016-11-18

添加的是style樣式，即使用obj.className='';也不影響style樣式，className只影響class樣式，所以用className='';只是清除了div的class樣式，而其他樣式不受影響，該div原本就沒有class樣式，所以用className='';不報錯也沒有任何變化。此處添加的是style樣式，用obj.style='';即可清除所有的style樣式，原div沒有style樣式，則起到清除添加樣式，達到還原效果。

我剛弄明白總結出來的觀點，希望你能懂

//定義"取消設置"的函數
function cancelSetting(){
? ?var question1=confirm('確定要取消所有設置？');
? ?if(question1==true){
? ? ? ?txt.style='';
? ?}
}
因為添加的是style樣式，所以清除時要用style=''，用className=''不起作用

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

收起回答

StephenHenry_09
2016-11-18

把源碼貼出來，就知道為什么了

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

收起回答

simon_yms 提問者

我用className實現了改變顏色按鈕的功能，具體的代碼在問題下面我放了兩張截圖，幫我看一下吧，謝謝了

2016-11-18 回復有任何疑惑可以回復我~

我不是管家回復 simon_yms 提問者

是不是不知道為什么顏色的className是有效的，但是寬高改變不了,這是因為id選擇器的權值比class的權值稿，當存在相同的屬性是，已id選擇器為主，我的方法是增加權值，!important

2016-11-18 回復有任何疑惑可以回復我~

星玉穎寶
2016-11-18

再試試，

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

收起回答

我不是管家
2016-11-18

<!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;}
????.dd{background:black;}
</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="bt1()";>??
????<input?type="button"?value="改變寬高"?onclick="bt2()";>
????<input?type="button"?value="隱藏內容"?onclick="bt3()";>
????<input?type="button"?value="顯示內容"?onclick="bt4()";>
????<input?type="button"?value="取消設置"?onclick="bt5()";>
??</form>
??<script?type="text/javascript">
//定義"改變顏色"的函數
???var?oTxt=document.getElementById("txt");
????function?bt1(){
????????oTxt.style.color="red";
????????oTxt.className='dd';
????}

//定義"改變寬高"的函數
function?bt2(){
????oTxt.style.width="400px";
????oTxt.style.height="500px";
}

//定義"隱藏內容"的函數
function?bt3(){
????oTxt.style.display="none";
}

//定義"顯示內容"的函數
function?bt4(){
????oTxt.style.display="block";
}
//定義"取消設置"的函數
function?bt5(){
????oTxt.removeAttribute('style')
?????var?wid=confirm("是否取消設置？");
???????if(wid==true){
???????????oTxt.removeAttribute('style');
???????}//取消設置恢復原狀
???????else{
???????????alert("您未取消設置");
???????}
????}

??</script>
</body>
</html>