返回随堂案例及自己......登陆

随堂案例及自己的总结

沉寂2018-11-26 15:44:54294

随堂案例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Change Div 各种属性</title>

<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">

<link rel="stylesheet" type="text/css" href="../css/css.css">

<style type="text/css">

#box{width: 100px;height: 100px;background: red;margin:5px 20px;}

</style>

</head>

<body>

<!-- 用按钮控制div高度,宽度,颜色,重置,隐藏,显示 -->

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

<input type="button" value="高度" onclick="change_height()">

<input type="button" value="宽度" onclick="change_width()">

<input type="button" value="颜色" onclick="change_color()">

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

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

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

<script type="text/javascript">

var box;

window.onload = function () {

box=document.getElementById("box")

}

function change_width (){//改变宽度

box.style.width="200px";

}

function change_height (){//改变高度

box.style.height="200px";

}

function change_color (){//改变颜色

box.style.background="pink";

}

function change_reset (){//重置

box.style.width="100px";

box.style.height="100px";

box.style.background="red";

}

function change_hidden (){//隐藏

box.style.display="none";

}

function change_display (){//重新显示

box.style.display="block";

}

</script>

</body>

</html>

老师您好:
该案例我唯一不明白的地方就是window.onload = function () {
box=document.getElementById("box")
}

这一块,这个window.onload  是什么意思呀?

还有就是这个函数没有函数名这样也可以?

JS中的"."是代表连接的意思吗?如果是那么"+"不也是连接的意思吗?

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送