通过按钮控制DIV样式

Original 2019-05-03 21:44:02 242
abstract:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>改变DIV样式</title
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变DIV样式</title>
    <script>
    // 声明全局变量,让后面函数共同调用
        var box1
        window.onload=function(){
            box1 =document.getElementById('box');
        };
        // 去调用全局变量
        function one() {
            box1.style.height='300px';
        };
        function two() {
           box1.style.width='300px';
        };
        function there() {
            box1.style.background='lightpink';
        };
        function four() {
            box1.style.width='150px';
            box1.style.height='150px';
            box1.style.background='lightskyblue';
        };
        function five() {
            box1.style.display='none';
        };
        function six() {
            box1.style.display='block';
        }
    </script>
    <style>
        #box{width: 150px;height: 150px;background: lightskyblue;margin:10px 60px}
    </style>
</head>
<body>
    <div id="box"></div>
    <button onclick="one()">变高</button>
    <button onclick="two()">变宽</button>
    <button onclick="there()">变色</button>
    <button onclick="four()">重置</button>
    <button onclick="five()">隐藏</button>
    <button onclick="six()">显示</button>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-05-05 09:09:08
Teacher's summary:完成的不错。js比较难,因为它的功能非常强大。继续加油。

Release Notes

Popular Entries