JavaScript学习之Element对象_属性

林林一928

已于 2024-04-18 17:58:31 修改

阅读量677

点赞数 22

文章标签： javascript 开发语言 ecmascript

于 2024-04-18 17:50:16 首次发布

本文链接：https://blog.csdn.net/m0_73765584/article/details/137929806

版权

0.通过style属性操作CSS

语法：

对象.style.样式属性 = '值'

注意：

1.修改样式通过 style 属性引出

2.如果属性有 - 连接符，需要转化为小驼峰命名法

3.赋值时，必要时候需要添加CSS单位(如：修改宽和高)

例：

如果修改的样式较多，直接通过 style 属性修改比较繁琐，我们可以通过下面的形式书写。

JavaScript学习之Element对象_属性

1. Element.id

Element.id属性返回指定元素的id属性，该属性可读写

例:要求：1.读取id属性为box的元素，并在控制台打印输出。2.修改id属性为box_change。3.修改后的id属性在控制台输出。

上述示例的代码：

<!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>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #box_change{
            width: 300px;
            height: 200px;
            background-color: paleturquoise;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    
    <div id="box">这是一个div</div>   
    
    <script>
        // 1. 获取元素
        var box = document.getElementById('box');
        // 2. 打印元素的 id 属性
        // console.log(box.id);
        // 3. 修改元素的 id 属性
        box.id = 'box_change';
        // 4. 打印修改后的 id 属性
        console.log(box.id);
    </script>
</body>
</html>

了解：如何获取document元素

2. Element.className

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割

注意：

直接使用className赋值会覆盖以前的类名，如果需要再添加一个类，需要保留之前的类名

例：要求：1.读取class属性为box的元素，并在控制台打印输出。2. 修改class属性为box_change,并将修改后的class属性在控制台输出。3. 添加一个值为box_change的class属性，并在控制台输出class属性值。

上述示例的代码：

<!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>
        .box{
            width: 200px;
            height: 200px;
            background-color: peachpuff;
        }
        .box_change{
            width: 300px;
            height: 200px;
            background-color: plum;
            border: 2px solid blue;
        }
    </style>
</head>
<body> 
    <div class="box">这是一个div</div>   
    
    <script>

        // 1. 获取元素
        var box = document.getElementsByClassName('box')[0];
        // // 2. 打印元素的 class 属性
        // console.log(box.className);
        // // 3. 修改元素的 class 属性
        // box.className = 'box_change';
        // // 4. 打印修改后的 class 属性
        // console.log(box.className);
        // 5. 添加元素的 class 属性
        box.className = 'box box_change';
        // 6. 打印添加后的 class 属性
        console.log(box.className);
    </script>
</body>
</html>

了解：如何获取document元素

3. Element.classList

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

classList对象有下列方法

add()：增加class类名。

remove()：移除类名class。

toggle()：将某个 class 移入或移出当前元素。(有就移除，没有就移入)

contains()：检查当前元素是否包含某个 class。

例1:通过 add() 追加class类名

注意：

如果追加多个类名，用逗号隔开

box.classList.add('box_change','box_test')

例2：通过remove()移除类名

注意：

如果移除多个类名，用逗号隔开

box.classList.remove('box_test', 'box_change')

例3：通过toggle()将某个 class 移入或移出当前元素。(有就移除，没有就移入)；通过contains检查是否存在某个类名

var div = document.getElementById('myDiv');

div.classList.toggle('myCssClass'); // resule:如果 myCssClass 不存在就加入，否则移除

div.classList.contains('myCssClass'); // result:返回 true 或者 false

了解：如何获取document元素

4. Element.innerHTML

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素

总结

1.将文本内容添加/更新到任意标签位置

2.会解析标签，多标签建议使用模版字符

语法：

el.innerHTML = '';

5. Element.innerText

innerText和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串

语法：

el.innerText = '';

6.附：操作表单元素属性

表单有许多情况，也需要修改属性，如：在登录页时，密码框可以显示密码和隐藏密码，本质上是将密码框转与文本框相互转换。

简单举个例子：

要求1：获取表单的值

注意：

不能使用input.innerHTML来获取值，因为input标签没有innerHTML属性,所以得不到表单的内容

要求2：将文本框转化为密码框

了解：如何获取document元素

林林一928

关注

22
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
JavaScript学习之Element对象_属性

JavaScript学习之Element对象_属性:1. Element.id; 2. Element.className; 3. Element.classList; 4. Element.innerHTML; 5. Element.innerText; 附：操作表单元素属性表单有许多情况，也需要修改属性，如：在登录页时，密码框可以显示密码和隐藏密码，本质上是将密码框转与文本框相互转换。不能使用input.innerHTML来获取值，因为input标签没有innerHTML属性,所以得不到表单的内容
复制链接

扫一扫