前端研习录（28）——JavaScript Element对象及其属性讲解及示例分析

清风不渡

于 2022-08-14 18:13:20 发布

阅读量257

点赞数

分类专栏：前端研习录文章标签：前端 javascript css

本文链接：https://blog.csdn.net/WXKKang/article/details/126332526

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（28）——JavaScript Element对象及其属性讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript Element对象及其属性部分

一、Element对象

Element对象对应的是网页的HTML元素。每一个HTML元素，在DOM树上都会对应转化成为一个Element对象

1、Element.id属性

Element.id属性返回指定元素的id属性，该属性可读可写，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    
    <div class="box" id="txt">Hello</div>

    <script>
        var txt = document.getElementById("txt");
        txt.id = "hello"        
    </script>

</body>
</html>

如此便将id改为了hello，结果如下：

在这里插入图片描述

2、Element.className属性

Element.className属性用于读写当前元素节点的class属性，他的值是一个字符串，每个class之间用空格分开，示例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
    </style>

</head>
<body>
    
    <div class="box" id="txt">Hello</div>

    <script>
        var txt = document.getElementById("txt");
        txt.className = "box box1"     
    </script>

</body>
</html>

结果如下，我们通过读写class属性为div添加了CSS样式：

在这里插入图片描述

3、Element.classList对象

classList对象有以下四个方法：

classList.add(); 添加一个class属性
classList.remove(); 移除一个class属性
classList.contains(); 检查当前元素是否包含某个class
classList.toggle(); 将某个class移入或移出当前元素（存在就移出，不存在就移入）

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: rebeccapurple;
        }
    </style>

</head>
<body>
    
    <div class="box" id="txt">Hello</div>

    <script>
        var txt = document.getElementById("txt");
        txt.classList.add("box1");
        if (txt.classList.contains("box")){
            txt.classList.remove("box")
        }
        txt.classList.toggle("box")
    </script>

</body>
</html>

结果如下：

在这里插入图片描述

为什么经过一番操作之后，box和box1都在呢

4、innerHTML和innerText

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

给innerHTML和innerText加入参数时，都是用于修改元素标签中的内容，而两者的区别是：innerHTML可以识别标签，而innerText识别不了标签，会统一识别成一个字符串，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>

</head>
<body>
    
    <div class="box" id="txt1">Hello</div>
    <div class="box" id="txt2">Hello</div>
    
 
    <script>
        var txt1 = document.getElementById("txt1");
        var txt2 = document.getElementById("txt2");
        var str = "<a href='https://www.baidu.com/'>前往百度</a>";
        txt1.innerHTML = str;
        txt2.innerText = str;
    </script>

</body>
</html>

结果如下：
在这里插入图片描述

二、Element获取元素位置

1、Element.clientHeight

Element.clientHeight 返回一个整数值，表示元素节点的CSS高度（单位：像素），除了元素本身的高度，它还包括padding部分，但是不包括border和margin部分
只对块级元素生效，对于行内元素则返回0，如果块级元素没有设置高度，则返回实际高度
如果有水平滚动条，则还要【减去】水平滚动条的高度

注意：返回的值始终是整数，如果是小数则会四舍五入
常用document.documentElement.clientHeight)返回视口总高度，document.body.clientHeight返回网页总高度

2、Element.clientWidth

Element.clientWidth返回一个整数值，表示元素节点的CSS宽度（单位：像素），除了元素本身的宽度，它还包括padding部分，但是不包括border和margin部分
只对块级元素生效，对于行内元素则返回0
如果有垂直滚动条，则还要【减去】垂直滚动条的宽度

3、Element.scrollHeight

Element.scrollHeight返回一个整数值，表示元素节点的CSS高度（单位：像素），除了元素本身的高度，它还包括padding部分，但是不包括border和margin部分
只对块级元素生效，对于行内元素则返回0，如果块级元素没有设置高度，则返回实际高度
如果有水平滚动条，则还要【加上】水平滚动条的高度

注意：返回的值始终是整数，如果是小数则会四舍五入
常用document.documentElement.scrollHeight)返回视口总高度，document.body.scrollHeight返回网页总高度（含滚动条）

4、Element.scrollWidth

Element.scrollWidth返回一个整数值，表示元素节点的CSS宽度（单位：像素），除了元素本身的宽度，它还包括padding部分，但是不包括border和margin部分
只对块级元素生效，对于行内元素则返回0
如果有垂直滚动条，则还要【加上】垂直滚动条的宽度

5、Element.scrollLeft

Element.scrollLeft 属性表示当前元素的水平滚动条向右侧滚动的像素数量

6、Element.scrollTop

Element.scrollLeft 属性表示当前元素的垂直滚动条向下滚动的像素数量

注意：
对于没有滚动条的网页元素，scrollLeft和scrollTop的值为0

如果要查看整张网页的滚动距离，则要从document.documentElement元素上读取，如下：
document.documentElement.scrollLeft 向左的像素距离
document.documentElement.scrollTop 向上的像素距离

7、Element.offsetHeight

Element.offsetHeight 属性返回一个整数，表示元素的CSS垂直高度（单位：像素），包括元素本身的高度、padding和border
如果有水平滚动条，则还要【加上】水平滚动条的高度

8、Element.offsetWidth

Element.offsetWidth属性返回一个整数，表示元素的CSS水平宽度（单位：像素），包括元素本身的高度、padding和border
如果有垂直滚动条，则还要【加上】垂直滚动条的宽度

注意：
如果元素的CSS设定为不可见（display:none），则返回0

9、Element.offsetLeft

Element.offsetLeft 属性返回当前元素左上角相对于Element.offsetParent节点的水平位移（单位：像素）
可以理解为：到定位父级左边界的间距

10、Element.offsetTop

Element.offsetTop属性返回当前元素左上角相对于Element.offsetParent节点的垂直位移（单位：像素）
可以理解为：到定位父级上边界的间距

注意：
当父节点没有设置定位时，一直向上寻找直至顶层文档
当父节点设置了定位时，则取距离父节点水平、垂直位移

12、示例

综合以上知识点，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 20px;
            background-color:yellowgreen;

        }

        .login{
            height: 150px;
            width: 150px;
            overflow: scroll;
        }

        .login1{
            position: relative;
        }

        h1{
            height: 60px;
        }
    </style>

</head>
<body>
        <div class="box" id="box1">Hello</div>


    <div class="login" id="login">
        <div class="box" id="box2">Hello</div>
    </div>
    

    <span id="txt">清风不渡</span>

    <h1>标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>
    
 
    <script>
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var login = document.getElementById("login");
        var txt = document.getElementById("txt");



        console.log("---------------------clientWidth   clientHeight----------------------");
        console.log("---------------------获取块级元素高宽度，含padding----------------------");
        console.log(box1.clientHeight);
        console.log(box1.clientWidth);

        console.log("---------------------获取行内元素高宽度，返回0----------------------");
        console.log(txt.clientHeight);
        console.log(txt.clientWidth);

        console.log("---------------------获取视口及网页高度----------------------");
        console.log(document.documentElement.clientHeight);
        console.log(document.body.clientHeight);

        console.log("---------------------scrollHeight   scrollWidth----------------------");
        console.log("---------------------获取块级元素高宽度，含padding，不含滚动条----------------------");
        console.log(login.clientHeight);
        console.log(login.clientWidth);

        console.log("---------------------获取块级元素高宽度，含padding，含滚动条----------------------");
        console.log(login.scrollHeight);
        console.log(login.scrollWidth);

        console.log("---------------------获取行内元素高宽度，返回0----------------------");
        console.log(txt.scrollHeight);
        console.log(txt.scrollWidth);

        console.log("---------------------获取视口及网页高度----------------------");
        console.log(document.documentElement.scrollHeight);
        console.log(document.body.scrollHeight);

        console.log("---------------------scrollHeight   scrollWidth----------------------");
        console.log("---------------------获取元素水平垂直方向的滚动距离----------------------");
        console.log(box2.scrollLeft);
        console.log(box2.scrollTop);
        console.log("---------------------获取整张网页水平垂直方向的滚动距离----------------------");
        console.log(document.documentElement.scrollLeft);
        console.log(document.documentElement.scrollTop);

        console.log("---------------------offsetHeight   offsetWidth----------------------");
        console.log("---------------------获取块级元素高宽度，含padding,border----------------------");
        console.log(box1.offsetHeight);
        console.log(box1.offsetWidth);

        console.log("---------------------获取行内元素高宽度，不返回0----------------------");
        console.log(txt.offsetHeight);
        console.log(txt.offsetWidth);

        console.log("---------------------offsetLeft   offsetTop----------------------");
        console.log("---------------------获取元素左上角相对于Element.offsetParent节点的水平、垂直位移----------------------");
        console.log("---------------------当父节点没有设置定位时，一直向上寻找直至顶层文档----------------------");
        console.log(box2.offsetLeft);
        console.log(box2.offsetTop);


        console.log("---------------------获取元素左上角相对于Element.offsetParent节点的水平、垂直位移----------------------");
        console.log("---------------------当父节点设置了定位时，则取距离父节点水平、垂直位移----------------------");
        login.classList.add("login1");
        console.log(box2.offsetLeft);
        console.log(box2.offsetTop);


        
    </script>

</body>
</html>