No.35 JavaScript---Element对象属性、Element获取元素位置

、

一、元素对象属性

Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。

1.1 .id

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

1.2 .className

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

1.3 classList

1.4 .innerHTML

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

1.5 innerText

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

二、Element获取元素位置

2.1 Element.clientHeight, Element.clientWidth

Element.clientHeight 属性返回一个整数值，表示元素节点的 CSS 高度(单位像素)，只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。
除了元素本身的高度，它还包括padding部分，但是不包括 brder、margin 。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

<!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;
            border: 5px solid blue;
            padding: 10px;
            margin: 20px;
            background-color: greenyellow;

        }
    </style>
</head>
<body>
    <div class = "box" id="box">我是一个块</div>
    <script>
        var box = document.getElementById("box")
        console.log(box.clientHeight)
        console.log(box.clientWidth)

    </script>

</body>
</html>

Element.clientwidth 属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding ，如果有垂直滚动条，还要减去垂直滚动条的宽度。

document.documentElement 的 clientHeight 属性，返回当前视口的高度(即浏览器窗口的高度)。 document.body 的高度则是网页的实际高度。

        //视口高度（屏幕的大小）
        console.log(document.documentElement.clientHeight)
        //网页高度(网页内容占用的大小）
        console.log(document.body.clientHeight)

posted @ 2025-03-06 15:00 百里屠苏top 阅读(125) 评论(0) 收藏举报

刷新页面返回顶部