通过dom改变css，html

句柄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
    <!-- 语法：document.getElementById(id).style.property=new style -->     
-------------------------------
#### 通过dom操作html
    document.write("hello");
            function demo1(){
            var nv = document.getElementById("pid").innerHTML="哈哈";
        }  
兼容不同浏览器的事件（IE8一下） 
var btn1 = document.getElementById("btn1");
    if(btn1.addEventListener){
        btn1.addEventListener("click",demo);
    }else if(btn1.attachEvent){
        btn1.attachEvent("onclick",demo);
    }else{
        btn1.onclick = demo();
    }        
    function demo(){
        alert("hello);
    }
posted @   小白咚  阅读(330)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
历史上的今天：
2019-06-25 js--调试常用语句
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛