2021/09/11

最新推荐文章于 2024-08-10 16:15:00 发布

m0_55786512

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量74

点赞数

分类专栏：学习小结文章标签： javascript html5 html

本文链接：https://blog.csdn.net/m0_55786512/article/details/120243457

版权

学习小结专栏收录该内容

39 篇文章 0 订阅

订阅专栏

#8：30-9：00 签到打卡

#9：30-12：00 观看javaweb视频

#14：00-18：00 写qq项目

1.添加属性删除属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置element方法</title>
</head>
<body>
    <a>链接</a>
    <input type="button" id="btn" value="设置属性">
    <input type="button" id="rem" value="删除属性">
<script>
    /*为a组件设置href属性*/
    var b=document.getElementById("btn");
    b.onclick=function () {
        var s=document.getElementsByTagName("a")[0];
        s.setAttribute("href","https://www.baidu.com");
    }

    /*为a组件删除href属性*/
    var c=document.getElementById("rem");
    c.onclick=function () {
        var s=document.getElementsByTagName("a")[0];
        s.removeAttribute("href");
    }

</script>
</body>
</html>

2.Node对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px red solid;
        }
        #d1{
            width: 200px;
            height: 200px;
        }
        #d2{
            width: 100px;
            height: 100px;
        }
        #d3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="d1">
    div
    <div id="d2">
        div2
    </div>
</div>
<a id="aa" href="javascript:void(0);">删除节点</a>
<a id="aa1" href="javascript:void(0);">添加节点</a>
<!--当前超链接有两个功能
    1.点击事件
    2.跳转事件  -->
<script>
    var a=document.getElementById("aa");
    a.onclick=function () {/*删除div2节点*/
        var b=document.getElementById("d1");
        var c=document.getElementById("d2");
        b.removeChild(c);
    }

    var d=document.getElementById("aa1");
    d.onclick=function () {/*添加d3节点*/
        var e=document.getElementById("d1");
        var f=document.createElement("div");
        /* 创建字节点*/
        f.setAttribute("id","d3");
        e.appendChild(f);
        /*添加子节点*/
    }
</script>
</body>
</html>

3.innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<body>
<div id="d1">
    div
</div>
<script>
    /*innerHTML可实现快速替换，添加*/

    /*获取组件*/
    var a=document.getElementById("d1");
    var v=a.innerHTML;
    //alert(v);

    /*div替换成text文本框*/
    //a.innerHTML="<input type='text'>";

    /*div里添加text文本框*/
    a.innerHTML+="<input type='text'>";
</script>
</body>
</html>

4.DOM控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>
    <style>
        .class01{
            border: 1px solid red;
            width: 200px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="d1" >
    div1
</div>
<div id="d2">
    div2
</div>
<script>
    var a=document.getElementById("d1");
    a.onclick=function () {
        /*设置红色边框*/
    a.style.border="1px solid red";
    /*设置宽度*/
    a.style.width="200px";
    /*设置字号*/
    a.style.fontSize="20px";
    }

    var b=document.getElementById("d2");
    b.onclick=function () {
        b.className="class01";
        /*设置class样式给div2*/
    }
</script>
</body>
</html>

m0_55786512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021/09/11

#8：30-9：00 签到打卡#9：30-12：00 观看javaweb视频#14：00-18：00 写qq项目1.Window对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>window对象</title></head><body><input type="bu...
复制链接

扫一扫

专栏目录