dom_1 点击改变颜色

点击改变标签属性和样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }

        .aaa {
            background-color: red;
        }
    </style>
</head>
<body>
<!--<div id="box" onclick="fn()" class="leiming" name="divName"></div>-->
<div id="box" class="leiming" name="divName"></div>

<script>

    //1.获取事件源（document.getElementById("box")）
    var div = document.getElementById("box");
    //获取事件源(一共五种)
    //    var div = document.getElementsByTagName("div")[0];
    //    var div = document.getElementsByClassName("leiming")[0];
    //不掌握
    //    var div = document.getElementsByName("divName")[0];


    //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
    //1.匿名绑定
    //     div.onclick = function () {
    //         //3.书写事件驱动程序。
    // //        alert(1);
    //         //可以操作标签的属性和样式。
    //         div.className = "aaa";
    // //        div.style.width = "200px";
    // //        div.style.height = "200px";
    // //        div.style.backgroundColor = "red";
    //     }

    //不能写写括号，否则成为了返回值（2.用函数名绑定）
    div.onclick = fn;

    function fn() {
        //3.书写事件驱动程序。
        // div.className = "aaa";
        div.style.width = "200px";
        div.style.height = "200px";
        div.style.backgroundColor = "#daa520";
    }

    //
    //    //3.行内绑定
    //    function fn(){
    //        div.className = "aaa";
    //    }

</script>
</body>
</html>
onclick
dom_1 点击改变颜色

点击改变标签属性和样式

推荐阅读更多精彩内容
