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

為什么只有一個按鍵可以使用，大神求解！

<!DOCTYPE HTML>

<html>

<head>

<title>javascript</title>

body{font-size:12px;}

#txt{

? ? height:400px;

? ? width:600px;

? ? border:#333 solid 0px;

? ? padding:5px;

}

? ? line-height:18px;

text-indent:2em;

}

</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="changew()">

? ? <input type="button" value="隱藏內容" onClick="hidden()">

? ? <input type="button" value="顯示內容" onClick="appear()">

? ? <input type="button" value="取消設置" onClick="cancel()">

? </form>

? <script type="text/javascript">

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

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

?function changecolor()

? ? sw.style.color="red";

? ? sw.style.backgroundColor="gray";

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

?function changew()

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

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

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

? ?function hidden()

? ?{

? ? ? ?sw.style.display="none";

? ?}

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

? function appear()

? {

? ? ? sw.style.display="block";

? }

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

? function cancel()

? {

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

? ? ? if(sure!=null)

? ? ? sw.removeAttribute=("style");

? }

? </script>

</body>

</html>

雨丶辰

2015-07-23

源自：JavaScript入門篇 4-1

關注問題我要回答

427

操作

收起

3 回答

愛39
2015-07-24

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

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

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

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

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

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

? </form>

? <script type="text/javascript">

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

function gbys(){

txt.style.color="red";

txt.style.backgroundColor="pink";

}

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

function gbkg(){

txt.style.width="400px";

txt.style.height="300px"

}

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

function ycnr(){

txt.style.display="none";

}

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

function xsnr(){

txt.style.display="block";

}

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

function qxsz(){

if (confirm("是否取消設置？")){

txt.style.color="#000";

txt.style.backgroundColor="#fff";

txt.style.weidth="600px";

txt.style.height="400px";

txt.style.display="block";

}

? </script>

</body>

</html>

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

收起回答

雨丶辰提問者
2015-07-23

萬分感謝，剛學，細節把握還很不到位。

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

收起回答

Perona

不客氣~~加油！

2015-07-23 回復有任何疑惑可以回復我~

Perona
2015-07-23

<input?type="button"?value="隱藏內容"?onClick="hidden()">

?function?hidden()

大爺，函數名不要去JS關鍵字，改個名唄。換成hide()也行啊

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

這里缺了引號

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

?if(sure!=null)

這里應該是判斷是否為真，而不是不等于null

?if(sure==true)

sw.removeAttribute=("style");

這里是不需要=，刪掉即可。

sw.removeAttribute('style');

修改后的完整代碼

<!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?0px;
????padding:5px;
}
p{
????line-height:18px;
text-indent:2em;
}
</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="changew()">
????<input?type="button"?value="隱藏內容"?onClick="hide()">
????<input?type="button"?value="顯示內容"?onClick="appear()">
????<input?type="button"?value="取消設置"?onClick="cancel()">
??</form>
??<script?type="text/javascript">
??var?sw=document.getElementById("txt");
//定義"改變顏色"的函數
?function?changecolor()
?{
????sw.style.color="red";
????sw.style.backgroundColor="gray";
?}
//定義"改變寬高"的函數
?function?changew()
?{
?????sw.style.width="200px";
?????sw.style.height="300px";
?}
//定義"隱藏內容"的函數
???function?hide()
???{
???????sw.style.display="none";
???}

//定義"顯示內容"的函數
??function?appear()
??{
??????sw.style.display="block";
??}
//定義"取消設置"的函數
??function?cancel()
??{
??????var?sure=confirm("是否取消設置？");
??????if(sure==true)
??????sw.removeAttribute('style');
??}
</script>
</body>
</html>

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

收起回答

lalala_0001

sw.removeAttribute('style');這一行中sw是什么？還是說可以隨意設置？

2015-07-27 回復有任何疑惑可以回復我~

Perona 回復 lalala_0001

var sw=document.getElementById("txt");

2015-07-27 回復有任何疑惑可以回復我~

lalala_0001 回復 Perona

謝謝你啦

2015-07-27 回復有任何疑惑可以回復我~