通过dom改变css，html-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44438307/article/details/133022976

本文深入探讨了DOM事件监听的实现方式，包括句柄式监听的使用与多个事件的添加及移除，同时介绍了如何通过DOM对象改变CSS样式与HTML内容，提供了兼容不同浏览器的事件处理方法。

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

句柄DOM监听事件

document.getElementById("btn").addEventListener("click",

function(){

alert("句柄监听事件");

}

);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="div">hello</p>
    <button onclick="demo()">按钮1</button>
    <button id="btn">按钮2</button>
    <button id="btn_many">添加多个句柄事件</button>
    <script>
        // 以前的监听
        function demo(){
            document.getElementById("div").innerHTML = "改变"
        }
        // 句柄式监听
        document.getElementById("btn").addEventListener("click",
            function(){
                alert("句柄监听事件");
            }
        );  
        // 声明多个句柄
        var x = document.getElementById("btn_many");
        x.addEventListener("click",hello);
        x.addEventListener("click",world);
        // 移出句柄
        x.removeEventListener("click",hello);
        function hello(){
            alert("hello")
        }
        function world(){
            alert("world")
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div{
            height: 100px;
            width: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <!-- 通过dom对象改变css -->
    <!-- 语法：document.getElementById(id).style.property=new style -->
    <div id="div" class="div">通过dom改变样式</div>
    <p id="pid">改变html</p>
    <button onclick="demo()">改变颜色</button>
    <button onclick="demo1()">改变内容</button>
    <script>
        function demo(){
            document.getElementById("div").style.background = "blue";
        }
        function demo1(){
            var nv = document.getElementById("pid").innerHTML="哈哈";
            document.getElementsByTagName("p"); // 通过标签寻找
        }
    </script>
</body>
</html>

------------------------

#### 通过dom对象改变css

-------------------------------

#### 通过dom操作html

document.write("hello");

function demo1(){

var nv = document.getElementById("pid").innerHTML="哈哈";

}

兼容不同浏览器的事件(IE8一下)

var btn1 = document.getElementById("btn1");

if(btn1.addEventListener){