【JavaScript】事件_style backgroundcolor rgba-优快云博客

本文链接：https://blog.youkuaiyun.com/liu_jiachen/article/details/76645529

本文介绍了一个简单的前端事件处理实例——通过点击按钮使div元素改变颜色。详细解释了事件处理过程中的三个关键要素：事件源、事件及事件处理程序，并提供了完整的HTML与JavaScript代码。

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

举例：

    我用我的 手指 按  开关  灯亮了。

三要素：

    事件源         事件          事件处理程序

事件源

    要触发的对象    在举例中对应 “开关”   也就是说它一般情况下可以理解为一个  名词

事件

    如何触发     在举例中对应  “按”   一般情况下是一个 动词  

    前端中 可以是  敲击键盘  按下鼠标  鼠标经过

事件处理程序

    发生了什么事   在举例中对应“灯亮了”

用法：

    事件源.事件=function(){
        事件处理程序（函数）
    }

案例：点击按钮div变色

分析：

    事件源：按钮

    事件：鼠标点击

    事件处理程序：div变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){

    //动态设置div和button的样式

    var divBg=document.getElementsByClassName("divbg")[0];
    divBg.style.width="200px";
    divBg.style.float="left";
    divBg.style.height="200px";
    divBg.style.backgroundColor="rgba(227, 0, 0, 0.16)";

    var btn=document.getElementById("btn_turn");
    btn.style.width="100px";
    btn.style.marginLeft="50px";
    btn.style.marginTop="70px";
    btn.style.float="left";
    btn.style.height="50px";
    btn.style.backgroundColor="rgba(0, 151, 0, 0.37)";
    btn.style.outline="0";//设置点击边框不可见
    btn.style.border="none";//设置初始静态边框不可见
    btn.style.fontSize="22px";
    btn.style.fontFamily="微软雅黑";
    btn.style.color="white";
    btn.innerText="变色";              //写代码的时候尽量整齐，让代码容易阅读

    //样式设置完毕

    var isturn=false;//实现点一次变色一次
    btn.onclick=function(){//鼠标点击事件
        if(isturn==false){
            divBg.style.backgroundColor="rgba(0, 151, 0, 0.37)";
            btn.innerText="变回去";
            isturn=true;
        }
        else{
            divBg.style.backgroundColor="rgba(227, 0, 0, 0.16)";
            btn.innerText="变色";
            isturn=false;
        }
    }
}
</script>
<div class="divbg"></div>
<button id="btn_turn"></button>
</body>
</html>