函数传参
<style>
#div1{width: 200px;height: 200px;background: red;}
</style>
<script>
function setcolor(color){
var oDiv=document.getElementById('div1');
oDiv.style.background=color;
}
</script>
<body>
<input type="button" value="变红"
onclick="setcolor('red');"/>
<input type="button" value="变绿" onclick="setcolor('green');"/>
<div id="div1"></div>
</body>
执行效果:
第二种操作属性的方法(传多个参数):
<style>
#div1{width: 200px;height: 200px;background: red;}
</style>
<script>
function setStyle(name,value){
var oDiv=document.getElementById('div1');
oDiv.style[name]=value;
}
</script>
<body>
<input type="button" value="变宽" onclick="setStyle('width','400px');"/>
<input type="button" value="变高" onclick="setStyle('height','400px');"/>
<input type="button" value="变色" onclick="setStyle('background','yellow');"/>
<div id="div1"></div>
</body>
效果展示:
提取行间事件:
使用window.onload
<script>
window.onload=function () {
varo Btn=document.getElementById('btn1');
oBtn.onclick=function () {
alert('Smile')
}
}
</script>
<body>
<input id="btn1" type="button" value="按钮" />
</body>