初识JavaScript03

来源：互联网发布：最好的加工软件编辑：程序博客网时间：2024/06/09 19:39

函数传参

<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>

阅读全文

0 0