實現以上功能:
1、文字的填充、form表單數據
2、改變顏色、改變寬高、隱藏內容、顯示內容、恢復
3、代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>style樣式</title> <style type="text/css"> * { font-size: 12px; } #txt { width: 600px; height: 400px; border: #333 solid 1px; padding: 5px; } p { line-height: 18px; text-indent: 2em; } </style> </head> <body> <h2>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="dcolor()"> <input type="button" value="改變寬高" onclick="dwh()"> <input type="button" value="隱藏內容" onclick="dh()"> <input type="button" value="顯示內容" onclick="ds()"> <input type="button" value="恢復" onclick="dclear()"> </form> <script type="text/javascript"> function dcolor() { var mychar = document.getElementById("txt"); mychar.style.color="red"; mychar.style.backgroundColor="#ccc" } function dwh() { var mychar = document.getElementById("txt"); mychar.style.width="400px"; mychar.style.height="200px"; } function dh() { var mychar = document.getElementById("txt"); mychar.style.display="none"; } function ds() { var mychar = document.getElementById("txt"); mychar.style.display="block" } function dclear() { if (confirm("確定要取消嗎?")){ var mychar = document.getElementById("txt"); mychar.style.width="600px"; mychar.style.height="400px"; mychar.style.color="#000"; mychar.style.backgroundColor="#fff" mychar.style.display="block"; } } </script> </body> </html>