事件和其他属性一样,可以用JS添加
window.onload可以在整个页面加载完后再去执行window.onload里的代码
否则可能发生当页面加载到某一行代码,里面有一个按钮,按钮的定义在后面的代码才出现,这样系统会报错。
下面的代码中,使用oBtn.onclick = function的方式,将事件当作属性来操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{width: 200px;height: 200px;background:red;}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn4');
oBtn.onclick = function()
{
oDiv.style.width = "600px";
};
};
function setStyle(name,value)
{
var oDiv = document.getElementById('div1');
oDiv.style[name] = value;
}
</script>
</head>
<body>
<input type="button" value="变蓝" onclick="setStyle('background', 'blue');" />
<input type="button" value="变绿" onclick="setStyle('background','green');" />
<input type="button" value="变黄" onclick="setStyle('background','yellow');" />
<input id="btn4" type="button" value="变宽" />
<div id='div1'></div>
</body>
</html>
制作选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 .active {background: yellow;}
#div1 div {width: 200px; height: 200px; background: :#CCC;
border:1px solid #AAA; display: none;}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<aBtn.length;++i)
{
aBtn[i].index = i;
aBtn[i].onclick=function ()
{
for(var i=0;i<aBtn.length;++i)
{
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display: block;">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
</div>
</body>
</html>
this表示当前发生事件的元素
在现在的常用浏览器当中,通过html加入的自定义的属性,浏览器会把它过滤掉,但是通过JS加入的自定义属性可以正常使用。
效果: