                        課程
                    
                        /前端開發
                        
                            /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" onclick="yanse()" value="改變顏色" > ?

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

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

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

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

? </form>

? <script type="text/javascript">

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

function yanse() {

con.style.color="red";

con.style.backgroundColor="#CCC";

txt.style.color="blue";

txt.style.backgroundColor="#CCC";

}

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

function kd(){

? ? con.style.width="180px";

? ? con.style.height="50px";

}

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

function hidetext() ?

? ? { ?

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

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

} ?

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

? ? function showtext() ?

{ ?

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

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

}

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

? function queren(){

? ? var mymessage=confirm("確認取消設置嗎？") ? ? ? ?;

? }

? </script>

</body>

</html>

weibo_宇裔魂_0

2015-05-22

源自：JavaScript入門篇 4-1

關注問題我要回答

7664

操作

收起

6 回答

慕絲0067042
2018-08-23

<!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;}
</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="yanse()"> ?
??? <input type="button" value="改變寬高" onclick="gaikuan()">
??? <input type="button" value="隱藏內容" onclick="yincang()">
??? <input type="button" value="顯示內容" onclick="xianshi()" >
??? <input type="button" value="取消設置" onclick="shezhi()">
? </form>
? <script type="text/javascript">
//定義"改變顏色"的函數
var? chcolor=document.getElementById("txt");
function yanse(){

chcolor.style.color="blue";
chcolor.style.backgroundColor="#CCC";
}
//定義"改變寬高"的函數
function? gaikuan(){
chcolor.style.width="5";
chcolor.style.height="50";
}
//定義"隱藏內容"的函數
function? yincang(){
chcolor.style.display="none";
}
//定義"顯示內容"的函數
function? xianshi(){
chcolor.style.display="block";
}
//定義"取消設置"的函數
function shezhi(){
?var? chc=confirm("取消設置嗎？");
? if(chc==true){
????? chcolor.removeAttribute("style");
? }
?
}

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

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

收起回答

慕粉4743295
2017-09-11

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

function dele() {

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

? ? ? ? document.getElementById("txt").removeAttribute("style");

? ? }

? ? else{

? ? ? ? alert("已取消操作");

? ? }

? ??

}

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

收起回答

啊啦啊啦
2016-01-24

function quxiao(){

? ??

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

? ? if(panduan==true){

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

? ? ? ? dd.removeAttribute('style');

? ? }

}

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

收起回答

兩_2

我試了一下，果然可以。但是如果之前設置的對象比較多，設置了txt、con，假如還有好四五個，那每一個都要單獨寫上面的代碼ar dd=document.getElementById("txt"); dd.removeAttribute('style'); 有沒有辦法一步到位？可以簡化代碼的？幾個id能不能放在一塊寫？

2016-03-17 回復有任何疑惑可以回復我~