您的位置：首页 > 其它

关于window.onload的一点认识

2015-12-05 15:45 246 查看

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}

function hidediv() {
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}
window.onload = function() {
var clk = document.getElementById('show_hd');
clk.onclick = function() {
alert("单击 ");
}
}
</script>
<style type="text/css">
#bg {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 10;
-moz-opacity: 0.7;
opacity: 0.7;
}

#show {
display: none;
position: absolute;
top: 25%;
left: 20%;
width: 53%;
height: 49%;
border: 8px solid red;
background-color: #fff;
z-index: 1002;
overflow: auto;
}

#btnclose {
background: green;
opacity: 10px;
left: 450px;
top: 300px;
width: 70px;
height: 30px;
position: absolute;
border-radius: 5px;
}

#show .show_hd {
display: block;
left: 0px;
top: 0px;
position: absolute;
border: 1px solid black;
width: 100%;
height: 20px;
}
</style>
</head>

<body>
测试
<input id="btnshow" type="button" value="Show" onclick="showdiv();" />
<div id="div_hs" style="width: 100px;border: 1px solid red;">aaa</div>
<div id="bg"></div>
<div id="show">
<div class="show_hd" id="show_hd">
头部
</div>

<input id="btnclose" type="button" value="Close" onclick="hidediv();" />
</div>
</body>

</html>

上面的程序如果不加window.onload 会报错（FF fireBUG），因为引擎会从上到下加载，不加window.onload 会报clk为空，因为不加找不到clk ,原因是DOM树找不到show_hd；

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
#div1{
width:200px;
height:200px;
background:#ccc;
}
</style>
<script>
window.onload=function change(a,b)
{
var odiv=document.getElementById('div1');
odiv.style[a]=b;
}
</script>
</head>
<body>
<input type="button" value="变宽" onclick="change('width','300px')"/>
<input type="button" value="变高" onclick="change('height','300px')"/>
<input type="button" value="变黑" onclick="change('background','black')"/>
<div id="div1">

</div>
</body>
</html>

这个加了 window.onload反而多余，因为onclick会直接去调用，不必等到全部加载完

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航