<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>