jQeury操作属性的方法好多

原创2018-11-21 16:12:2278
摘要:可以增删改好神奇的用到的时候查手册请老师忽略下面的代码<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>changeDIV</title>    <style ty

可以增删改

好神奇的

用到的时候查手册

请老师忽略下面的代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>changeDIV</title>

    <style type="text/css">

        #box{width: 100px;height: 100px;background-color: red;margin-right: 20px 80px;}

    </style>

</head>

<body>

    

    <script type="text/javascript">

        var box

        window.onload=function () {

            // body...

            box=document.getElementById('box')

        }

        function aa() {

            // box.style.height="400px"

            box.style.height="400px"

        }

        function bb() {

            box.style.width="400px"

        }

        function cc() {

            box.style.background="pink"

        }

        function dd() {

            // body...

            box.style.height="100px"

            box.style.width="100px"

            box.style.background="red"

        }

        function ee() {

            // body...

            box.style.display="none"

        }

        function ff() {

            // body...

            box.style.display="block"

        }


    </script>

    <div id="box"></div>

    <input type="button" value="变高" onclick="aa()">

    <input type="button" value="变宽" onclick="bb()">

    <input type="button" value="变色" onclick="cc()">

    <input type="button" value="重置" onclick="dd()">

    <input type="button" value="隐藏" onclick="ee()">

    <input type="button" value="显示" onclick="ff()">

</body>

</html>


发布手记

热门词条