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

代碼改成這樣了，還是不行，還有什么辦法

<!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="改變顏色" >??

? ? <input type="button" value="改變寬高" >

? ? <input type="button" value="隱藏內容" >

? ? <input type="button" value="顯示內容" >

? ? <input type="button" value="取消設置" >

? </form>

? <script type="text/javascript">

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

function setColor()

{

? ? var target=document.getElementById("con");

? ? target.style.color="green";

? ? target.style.backgroundColor="blue";

}

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

function setSize()

{

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

? ? target.style.width="300px";

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

}

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

function hidden()

{

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

? ? target.style.dispaly="none";

}

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

function visible()

{

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

? ? target.style.dispaly="block";

}

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

function offset(){

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

? ? var offset=offset("是否取消設置");

? ? if(offset==true)

? ? {

? ? ? ? target.removeAttribute("style");

? ? }

? ? else{

? ? ? ? return;

? ? }

}

? ? <input type="button" value="改變顏色" onclick="setColor()">? ? ??

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

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

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

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

? </script>

</body>

</html>

1710010101陳沐梓

2019-04-10

源自：JavaScript入門篇 4-1

關注問題我要回答

785

操作

收起

3 回答

掙錢就完了
2019-05-06

我這個更簡便，但是不知道寬高怎么弄，想求大佬幫忙弄一下。

<!DOCTYPE html>

<html>

<head>

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

? ? <input type="button" value="改變寬高" onClick="width()">

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

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

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

? </form>

? <script type="text/javascript">

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

? var w2=document.getElementById("con");

? function color(){

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

? ? w1.style.backgroundColor="#ccc";

? ? w2.style.color="blue";

? ? w2.style.backgroundColor="#99CCFF";

? }

function width(){

w1.style.width="300px";

w2.style.height="400px";

}

function dplay(){

w1.style.display="none";

}

function play(){

w1.style.display="block";

}

function rest(){

var w1=confirm("是否取消所有設置？");

if(w1==true||w2==true){

txt.removeAttribute('style');

con.removeAttribute('style');

}

else{

alert("請您繼續！")

}

? </script>

</body>

</html>

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

收起回答

慕仔9503151
2019-04-26

我這個更簡便

<!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="color()"> ?

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

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

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

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

? </form>

? <script type="text/javascript">

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

function color(){

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

? ? color.style.color = "#f00";

? ? color.style.backgroundColor = "#ccc";

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

function wh(){

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

? ? w.style.width = "300px";

? ? w.style.height = "200px";

}

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

function hi(){

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

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

}

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

function bl(){

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

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

}

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

function re(){

? ? if(confirm("確定重置網頁嗎？"){

? ? ? ?re.style="none";

? ? }

}

? </script>

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

收起回答

小二and小王子
2019-04-10

1、將代碼下面的5個input刪除，js里面不要這么放html代碼。

2、在最開始的5個input中依次添加onclick="setColor()"、onclick="setSize()"、onclick="hidden1()"、onclick="visible()"、onclick="offset1()"。

3、方法的命名最好不要用hidden等保留字。你的input的方法名要和js中一樣。大小寫也要一樣。你的offset大小寫不一致。你的display也寫錯了，你寫成了dispaly.

4、最后一個是否取消設置。我用了confirm來進行彈窗。

---------下面是我的修改之后的代碼------------------

<!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="setColor()">??

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

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

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

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

? </form>

? <script type="text/javascript">

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

function setColor()

{

? ? var target=document.getElementById("con");

? ? target.style.color="green";

? ? target.style.backgroundColor="blue";

}

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

function setSize()

{

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

? ? target.style.width="300px";

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

}

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

function hidden1()

{

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

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

}

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

function visible()

{

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

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

}

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

function offset1(){

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

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

? ? if(offset==true)

? ? {

? ? ? ? target.removeAttribute("style");

? ? }

? ? else{

? ? ? ? return;

? ? }

}

? </script>

</body>

</html>

-----------------

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

收起回答

1710010101陳沐梓提問者

謝謝大佬

2019-04-10 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

JavaScript入門篇

參與學習 741334 人
解答問題 9868 個

JavaScript做為一名Web工程師的必備技術，本教程讓您快速入門

進入課程

本課相似問答

2 回答為什么這樣的代碼執行不了

5 回答代碼寫成這樣，為什么運行結果不對

1 回答為什么有時候我用不同的代碼但運行的結果還是一樣的

3 回答這些代碼怎么無法修改寬高和還原設置

1 回答還有這樣？

搜索更多本課相關問答

代碼改成這樣了，還是不行，還有什么辦法

我要回答關注問題

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

熱搜

最近搜索清空

代碼改成這樣了，還是不行，還有什么辦法

3 回答

本課相似問答

代碼改成這樣了，還是不行，還有什么辦法

代碼改成這樣了，還是不行，還有什么辦法

代碼改成這樣了，還是不行，還有什么辦法