js控制div样式!

原创 2019-01-02 14:18:13 285
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>javaScript控制div样式!!!</title>  &
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javaScript控制div样式!!!</title>
    <style>
        *{margin: 0px;padding: 0px;}
        #box{width: 100px;height: 100px;background-color:red;margin: 10px 50px; }
    </style>
</head>
<body>
    <div id="box">
        
    </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>
    <script>
        var box  //声明变量
        window.onload=function(){  //页面加载完整执行改函数 window是全局的意思
            box=document.getElementById('box')  //获取div的id然后赋值给变量box
        }
        function a(){
            box.style.height="500px" //改变高度
        }
        function b(){
            box.style.width="500px" //改变宽度
        }
        function c(){
            box.style.background="blue" //改变颜色
        }
        function d(){
            box.style.height="100px"
            box.style.width="100px"
            box.style.background="red"
        }
        function e(){
            box.style.display="none" //隐藏
        }
        function f(){
            box.style.display="block" //显示
        }

    </script>
</body>
</html>

这节课是案例课运用了之前学到的知识有,用var关键字声明变量,变量的赋值,创建函数,全局变量在函数内部使用要加上window.变量名,最主要的是用到了javaScript中的事件。

总结这个真的不是很擅长--

批改老师:天蓬老师批改时间:2019-01-02 14:32:02
老师总结:var关键字声明变量,变量的赋值,创建函数, var 不能创建函数,他只是声明了一个变量,将一个函数的声明文本赋值给它, 就是一个函数表达式,声明函数只能用function funcName(){...}

发布手记

热门词条