js控制div

Original 2019-01-21 14:44:02 163
abstract:<!DOCTYPE html><style>    #x{        width: 100px;        height: 100px;        background-color:red;    }&l

<!DOCTYPE html>

<style>

    #x{

        width: 100px;

        height: 100px;

        background-color:red;

    }

</style>

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div id="x">

            

        </div>

        <button onclick="a()">变高</button>

        <button onclick="b()">变宽</button>

        <button onclick="c()">变色</button>

        <button onclick="d()">重置</button>

        <button onclick="e()">隐藏</button>

        <button onclick="f()">显示</button>

    </body>

</html>

<script type="text/javascript">

    var x = document.getElementById('x');

    function a(){

        x.style.height = "200px";

    }

    function b(){

        x.style.width = "200px";

    }

    function c(){

        x.style.backgroundColor = "pink";

    }

    function d(){

        x.style.height = "100px";

        x.style.width = "100px";

        x.style.backgroundColor = "red";

    }

    function e(){

        x.style.visibility = "hidden";

    }

    function f(){

        x.style.visibility = "visible";

    }

</script>


Correcting teacher:韦小宝Correction time:2019-01-21 16:10:47
Teacher's summary:写的很不错 这种小案例没事可以多练习几个 可以帮助我们快速的掌握js基础

Release Notes

Popular Entries