一张图轻松掌握如何通过JS修改元素的内容与属性

煮雨♪

已于 2022-11-04 17:13:25 修改

阅读量886

点赞数 1

分类专栏：前端文章标签： javascript 前端

于 2022-11-03 16:28:27 首次发布

本文链接：https://blog.csdn.net/qq_51732393/article/details/127672297

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过JS修改元素的内容、属性

一张图轻松掌握如何修改元素的内容与属性
在这里插入图片描述
特别强调：内置属性的修改方法只适用于自己，而自定义属性的修改方法同时适用于两者
下面用一段代码加强理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
    <style>
    	.box1{
    		width:100px;
    		height:100px;
    		background-color:red;
    	}
    	.blue{
    		width:100px;
    		height:100px;
    		background-color:blue;
    	}
    </style>
</head>
<body>
    <div data-index="1" class="box1">456
        <div class="box2">123</div>
    </div>
    <script>
        var div=document.querySelector('.box1');
        div.className='box3';//修改div类名为box3
        div.setAttribute('class','box1');//修改div类名为box1
        div.getAttribute('data-index');//获取 1
        div.removeAttribute('data-index');//删除data-index 属性
        console.log(div.innerText);
        /*456
          123*/
        console.log(div.innerHTML);
        /*456
        <div class="box2">123</div>
        */
        div.style.backgroundColor='yellow';//修改的是CSS里面box1的width
        div.className='blue';//修改整个样式
    </script>
</body>
</html>

下面是我学习这里的随笔，大家随便看看

5.通过js修改元素的内容（html）、属性（html）、样式属性（css）： --有则获取（并修改–赋值），无则增加
-修改内容：
-element.innerText:只获取内容，不保留空格与换行
-element.innerHTML：还获取元素对象内的html标签，保留空格与换行
-修改属性：
-element.属性名=…
-修改样式属性：
-element.style.样式属性名=… ：单个样式
-element.className=… ：按类多个样式

    --样式属性名均要采用驼峰命名法调用，不同于css的短横杠连接
    --通过js修改的样式均为行内样式，权重高于css，故冲突时以js修改的为主

6.内置属性与自定义属性：
1.内置（只适用于内置）： --有为获取（并修改–赋值），无为增加
-element.属性名=…
2.自定义属性（同时适用于内置）： --获取、增加、删除、赋值为修改
-element.getAttribute(‘porperty’):获取property的属性值
特殊：element.getAttribute(‘class’) <=> element.className
-element.setAttribute(‘property’,‘value’):设置/新增property的属性值为value 的功能
-element.removeAttribute(‘porperty’):删除property属性
3.自定义H5新增：
–H5将自定义格式统一为：data-xxx
-element.dataset.xxx:返回所有以data开头的自定义属性的k-v集合
或 element.dataset[‘xxx’]

顺口溜：获取均为属性值，修改一定要赋值，有则为改无为加