DOM操作Html 和通过DOM对象改变CSS

最新推荐文章于 2023-06-15 21:40:40 发布

一个半路出家的人

最新推荐文章于 2023-06-15 21:40:40 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_42039281/article/details/81986585

版权

javaS 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

DOM

6 篇文章 1 订阅

订阅专栏

DOM 文档对象模型 Document object Model

一,DOM操作HTML

1,改变HTML输出流:

注意:绝对不要在文档加载完车后使用document.write().这会覆盖掉该文档

2,寻找元素:

通过id找到HTML元素

通过标签名找到HTML元素

3,改变Html内容:使用属性:innerHTML

4,改变HTML属性:

使用属性: attribute

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作HTML</title>
</head>
<body>
    <a id="aid" href="http://www.baidu.com">跳转</a>
    <p id="pid">Hello</p>
    <button onclick="demo()">按钮</button>
<script>
    //简单的输出
    // document.write("hello")
    //使用id寻找HTML元素
    // function demo(){
    //     // var nv= document.getElementById("pid");
    //     // nv.innerHTML = "world";
    //     document.getElementById("pid").innerHTML = "world"
    // }

    //改变HTML的属性
    function demo(){
        document.getElementById("aid").href = "http://www.taobao.com";
    }
</script>
</body>
</html>

二,通过DOM对象改变CSS

语法 : document.getElementById(id).style.property = new style;

<!DOCTYPE html>
<html>
<head  lang="en">
    <meta charset="UTF-8">
    <title>DOM操作css</title>
    <link rel="stylesheet" type="text/css" href="DOM操作CSS.css">
</head>
<body>
    <div class="div" id="div">这是一个盒子</div>
    <input type="button" value="按钮" onclick="demo1()">
    <script>
       function demo1(){
            var gn = document.getElementById("div");
            gn.style.backgroundColor = "blue";
        }
    </script>
</body>
</html>

三,事件句柄

句柄事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件句柄</title>
</head>
<body>
    <p id="pid">Hello</p>
    <button id="btn">按钮</button>
    <script>
        document.getElementById("btn").addEventListener("click",function(){//事件句柄不会被覆盖,可以设置多个
            alert("hello")
        });
        document.getElementById("btn").addEventListener("click",function(){//事件句柄不会被覆盖,可以设置多个
            alert("word")
        });
    </script>
</body>
</html>

一个半路出家的人

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DOM操作Html 和通过DOM对象改变CSS

DOM 文档对象模型 Document object Model一,DOM操作HTML 1,改变HTML输出流: 注意:绝对不要在文档加载完车后使用document.write().这会覆盖掉该文档 2,寻找元素: 通过id找到HTML元素通过标签名找到HTML元素 3,改变Htm...
复制链接

扫一扫