返回JavaScr......登陆

JavaScript案例及总结

草原上的星辰2018-12-07 20:48:0418
<!DOCTYPE html>
<html >
<head>
         <meta charset="UTF-8">
         <title>changeDIV</title>
    <style style="text/css">
                #box{height: 100px;width: 100px;background-color: red;margin:20px 90px;}     
    </style>
</head>
<body>
         <script style="text/javascript">
                  var box
        window.onload=function(){
                box=document.getElementById("box")
        }
        function heighten(){
                box.style.height="400px"//变高
        }
        function widen(){
                box.style.width="400px"//变高
        }
        function discolor(){
                box.style.backgroundColor="pink"//变色
        }
        function reset(){
                box.style.height="100px"
                box.style.width="100px"
                box.style.backgroundColor="red"
        }
        function hide(){
                box.style.display="none"//显示
        }
        function show(){
                box.style.display="block"//隐藏
        }
         </script>
         <div id="box"></div>
         <input type="button" value="变宽" onclick="heighten()">
         <input type="button" value="变高" onclick="widen()">
         <input type="button" value="变色" onclick="discolor()">
         <input type="button" value="重置" onclick="reset()">
         <input type="button" value="隐藏" onclick="hide()">
         <input type="button" value="显示" onclick="show()">
    总结:
    选择器的使用
    全局变量的定义:window.load()
    HTML DOM 改变css样式:语法document.getElementById().style.属性="属性值"
    属性带 - 的 使用驼峰写法
    display属性的使用
    onclick事件
    问题:
    document.getElementById() 括号内部 老师讲课的时候有时单引号,又时双引号,但并不影响结果,
    我想问的是 是不是可以随便用,还有给数组元素赋值的时候也是这样
</body>
</html>


最新手记推荐

• 页面中常见垂直三级导航• 商品导航功能• 搭建后台模板• 常用导航二级菜单布局-浮动、定位• 常用导航条布局-浮动、小图标添加、div命名规则减少代码量

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网