請(qǐng)問大神,為什么我這個(gè)代碼點(diǎn)了按鈕以后沒反應(yīng)
<!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;}
.one{height:400px;width:600px;border:red dotted 5px;}
</style>
</head>
<body>
? <h2 id="con">JavaScript課程</H2>
? <div id="txt">
???? <h5 id="hh">JavaScript為網(wǎng)頁(yè)添加動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互的功能。</h5>
??????? <p id="p1">1. JavaScript入門篇,讓不懂JS的你,快速了解JS。</p>
??????? <p id="p2">2. JavaScript進(jìn)階篇,讓你掌握J(rèn)S的基礎(chǔ)語(yǔ)法、函數(shù)、數(shù)組、事件、內(nèi)置對(duì)象、BOM瀏覽器、DOM操作。</p>
??????? <p id="p3">3. 學(xué)完以上兩門基礎(chǔ)課后,在深入學(xué)習(xí)JavaScript的變量作用域、事件、對(duì)象、運(yùn)動(dòng)、cookie、正則表達(dá)式、ajax等課程。</p>
? </div>
? <form>
? <!--當(dāng)點(diǎn)擊相應(yīng)按鈕,執(zhí)行相應(yīng)操作,為按鈕添加相應(yīng)事件-->
??? <input type="button" value="改變顏色" onclick="co()"/>?
??? <input type="button" value="改變寬高" onclick="wh()"/>
??? <input type="button" value="隱藏內(nèi)容" onclick="no()"/>
??? <input type="button" value="顯示內(nèi)容" onclick="ok()"/>
??? <input type="button" value="取消設(shè)置" onclick="qx()"/>
? </form>
? <script type="text/javascript">
? //定義變量
?? var aa=document.getElentmentById("con");
?? var bb=document.getElentmentById("txt");
?? var cc=document.getElentmentById("hh");
?? var dd=document.getElentmentById("p1");
?? var ee=document.getElentmentById("p2");
?? var ff=document.getElentmentById("p3");
//定義"改變顏色"的函數(shù)
function co(){
aa.style.color="#9cf";
cc.style.color="blue";
dd.style.color="red";
ee.style.color="red";
ff.style.color="red";
}
function wh(){
??? bb.className="one";
}
//定義"改變寬高"的函數(shù)
function no(){
??? dd.style.display="none";
}
//定義"隱藏內(nèi)容"的函數(shù)
function ok(){
??? dd.style.display="block";
}
//定義"顯示內(nèi)容"的函數(shù)
function qx(){
??? var msg=confirm("確定要取消嗎")
??? if (msg==true){
??????? aa.removeAttribute('style');
??????? bb.removeAttribute('style');
??????? cc.removeAttribute('style');
??????? dd.removeAttribute('style');
??????? ee.removeAttribute('style');
??????? ff.removeAttribute('style');
??? }
??? else{
??????? alert("取消");
??? }
}
//定義"取消設(shè)置"的函數(shù)
? </script>
</body>
</html>
2018-06-07
這個(gè)我改過的試了試可以用,你設(shè)置的one的寬高和txt的相同了,用classname改變那個(gè)寬高有點(diǎn)不如直接改,首先你要有class對(duì)象及屬性,才能改它的屬性,我給div加了個(gè)class,把#txt給換了,然后就是清除格式的時(shí)候,那個(gè)bb代表的是txt,我給換成class后清除寬高的時(shí)候就換了,清除的時(shí)候取了個(gè)巧.......第一次回復(fù),水平不高各位大佬不要嘲笑....
<!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;}
.ooo{
? ? height:400px;
? ? width:600px;
?border:#333 solid 5px;
?padding:5px;}
p{
?line-height:18px;
?text-indent:2em;}
.one{
height:200px;
width:300px;
border:red dotted 5px;
}
</style>
</head>
<body>
? <h2 id="con">JavaScript課程</h2>
? <div id="txt" class="ooo">?
? ? ?<h5 id="hh">JavaScript為網(wǎng)頁(yè)添加動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互的功能。</h5>
? ? ? ? <p id="p1">1. JavaScript入門篇,讓不懂JS的你,快速了解JS。</p>
? ? ? ? <p id="p2">2. JavaScript進(jìn)階篇,讓你掌握J(rèn)S的基礎(chǔ)語(yǔ)法、函數(shù)、數(shù)組、事件、內(nèi)置對(duì)象、BOM瀏覽器、DOM操作。</p>
? ? ? ? <p id="p3">3. 學(xué)完以上兩門基礎(chǔ)課后,在深入學(xué)習(xí)JavaScript的變量作用域、事件、對(duì)象、運(yùn)動(dòng)、cookie、正則表達(dá)式、ajax等課程。</p>
? </div>
? <form>
? <!--當(dāng)點(diǎn)擊相應(yīng)按鈕,執(zhí)行相應(yīng)操作,為按鈕添加相應(yīng)事件-->
? ? <input type="button" value="改變顏色" onclick="co()"/> ?
? ? <input type="button" value="改變寬高" onclick="wh()"/>
? ? <input type="button" value="隱藏內(nèi)容" onclick="no()"/>
? ? <input type="button" value="顯示內(nèi)容" onclick="ok()"/>
? ? <input type="button" value="取消設(shè)置" onclick="qx()"/>
? </form>
? <script type="text/javascript">
? //定義變量
? ?var aa=document.getElementById("con");
? ?var bb=document.getElementById("txt");
? ?var cc=document.getElementById("hh");
? ?var dd=document.getElementById("p1");
? ?var ee=document.getElementById("p2");
? ?var ff=document.getElementById("p3");
//定義"改變顏色"的函數(shù)
function co(){
aa.style.color="#9cf";
cc.style.color="blue";
dd.style.color="red";
ee.style.color="red";
ff.style.color="red";
}
function wh(){
? ? bb.className="one";
}
//定義"改變寬高"的函數(shù)
function no(){
? ? bb.style.display="none";
}
//定義"隱藏內(nèi)容"的函數(shù)
function ok(){
? ? bb.style.display="block";
}
//定義"顯示內(nèi)容"的函數(shù)
function qx(){
? ? var msg=confirm("確定要取消嗎")
? ? if (msg==true){
????????bb.style= "";
????????bb.className="ooo";
? ? ? ? aa.removeAttribute('style');
? ? ? ? cc.removeAttribute('style');
? ? ? ? dd.removeAttribute('style');
? ? ? ? ee.removeAttribute('style');
? ? ? ? ff.removeAttribute('style');
? ? }
? ? else{
? ? ? ? alert("取消");
? ? }
}
//定義"取消設(shè)置"的函數(shù)
? </script>
</body>
</html>
2018-06-02
var aa=document.getElentmentById("con");
?? var bb=document.getElentmentById("txt");
?? var cc=document.getElentmentById("hh");
?? var dd=document.getElentmentById("p1");
?? var ee=document.getElentmentById("p2");
?? var ff=document.getElentmentById("p3");
你這里獲取元素這里打錯(cuò)了,多了nt