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>

效果图：