JavaScript 一些基礎練習

JavaScript爲網頁添加動態效果並實現與用戶交互的功能。改變顏色以及寬高,隱藏或顯示內容,取消設置

<style type="text/css"> body { font-size: 12px;
    } #txt { height: 200px; width: 350px; border: #333 solid 1px; padding: 5px; margin-bottom: 20px;
    } p { line-height: 18px; text-indent: 2em;
    } </style>

<div id="txt">
    <h5>JavaScript爲網頁添加動態效果並實現與用戶交互的功能。</h5>
    <p>111111111111111111111111111111111</p>
    <p>222222222222222222222222222222222</p>
    <p>333333333333333333333333333333333</p>
</div>
<form>
    <!--當點擊相應按鈕，執行相應操做，爲按鈕添加相應事件-->
    <input type="button" value="改變顏色" onClick="changecolor()" >
    <input type="button" value="改變寬高" onClick="changewidth()">
    <input type="button" value="隱藏內容" onClick="hidetext()">
    <input type="button" value="顯示內容" onClick="showtext()">
    <input type="button" value="取消設置" onClick="queXiao()">
</form>

<script type="text/javascript">
    //定義"改變顏色"的函數
    function changecolor() { var mycolor = document.getElementById('txt'); mycolor.style.color = 'red'; mycolor.style.backgroundColor = 'gray'; } //定義"改變寬高"的函數
    function changewidth() { var mywidth = document.getElementById('txt') mywidth.style.width = '280px' mywidth.style.height = '280px' } //定義"隱藏內容"的函數
    function hidetext() { var mychar = document.getElementById("txt"); mychar.style.display = 'none'; } //定義"顯示內容"的函數
    function showtext() { var mychars = document.getElementById("txt"); mychars.style.display = 'block'; } //定義"取消設置"的函數
    function queXiao() { var queXiao = document.getElementById("txt"); var qx = confirm("你肯定取消嗎？"); if (qx == true) { queXiao.removeAttribute("style"); } } </script>

效果圖：