初识JavaScript03_audojs setcolor(long)-优快云博客

本文链接：https://blog.youkuaiyun.com/wcx909241523/article/details/78177625

本文通过JavaScript展示了如何动态地改变网页元素的样式，包括颜色、宽度和高度等属性。并通过不同按钮触发不同的样式更改，使用户可以直观地看到效果变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数传参

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