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

成功啦大家可以參考一下喔！

<!DOCTYPE html>
<html lang="en">

<head>
? <meta charset="UTF-8">
? <meta http-equiv="X-UA-Compatible" content="IE=Edge">
? <meta name="viewport" content="width=device-width, initial-scale=1">
? <title>HTML</title>
? <style>
??? body {
????? font-size: 12px;
????? margin: 0;
??? }

??? #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="a()">
??? <input type="button" value="改變寬高" onclick="b()">
??? <input type="button" value="隱藏內容" onclick="c()">
??? <input type="button" value="顯示內容" onclick="d()">
??? <input type="button" value="取消設置" onclick="e()">
? </form>
? <script>
??? function a() {
????? var k = document.getElementById("txt");
????? k.style.color = "#FE3EA2";
????? k.style.backgroundColor = "#000fff"
??? }
??? function b() {
????? var z = document.getElementById("txt");
????? z.style.width = "355px";
????? z.style.height = "255px"
??? }
??? function c() {
????? var w = document.getElementById("txt");
????? w.style.display = "none";
??? }
??? function d() {
????? var h = document.getElementById("txt");
????? h.style.display = "block";
??? }
??? function e() {
????? var z = confirm("是否取消設置");
????? if (z == true) {
??????? x = document.getElementById("txt");
??????? x.style.color = "black";
??????? x.style.backgroundColor = "#fff";
??????? x.style.width = "600px";
??????? x.style.height = "400px";
??????? x.style.display = "block";
????? }
?? }
? </script>
</body>

</html>