元素的位置与尺寸

哆来A梦没有口袋

于 2022-01-28 11:54:58 发布

阅读量1.1k

点赞数

分类专栏：一天一个小知识文章标签：元素的高度 scrollTop clientTop 元素的可视区域元素的位置

本文链接：https://blog.csdn.net/qq_42625428/article/details/122728252

版权

一天一个小知识专栏收录该内容

14 篇文章 2 订阅

订阅专栏

如果把鸡蛋看成一个div,该怎么描述它所在的位置和样式？这就是接下来要描述的知识点啦

1.offsetHeight, offsetWidth.offsetLeft, offsetTop, offsetParent

el.offsetHeight	任何一个元素的高度(height+padding+border)
el.offsetWidth	任何一个元素的宽度(width+padding+border)
el.offsetLeft	一个元素距离相对容器的水平偏移
el.offsetTop	一个元素距离相对容器的垂直偏移
el.offsetParent	元素的相对容器

2.clientWidth,clientHieght,clientTop,clientLeft

el.clientWidth	元素的内容区宽度（width+padding）
el.clientHeight	元素的内容区高度（height+padding）
el.clientTop	元素的上边框宽度
el.clientLeft	元素的左边框宽度

举个栗子：

<!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>Document</title>
    <style>
        #father {
            width: 400px;
            height: 400px;
            background: pink;
            padding: 20px;
            border: 2px solid black;
            margin: 0 auto;
            position: relative;
        }

        #child {
            position: absolute;
            width: 200px;
            height: 200px;
            margin-left: 100px;
            background: red;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="child">
        </div>
    </div>
    <script>
    </script>
</body>
</html>

3.scorllHeight,scrollWidth.scrollTop.scrollLeft

el.scrollHeight	元素的高度(包含滚动的高度)
el.scrollWidth	元素的宽度(包含滚动的宽度)
el.scrollTop	元素的滚动高度
el.scrollLeft	元素的滚动宽度

哆来A梦没有口袋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的位置与尺寸

如果把鸡蛋看成一个div,该怎么描述它所在的位置和样式？这就是接下来要描述的知识点啦1.offsetHeight, offsetWidth.offsetLeft, offsetTop, offsetParentel.offsetHeight 任何一个元素的高度(height+padding+border) el.offsetWidth 任何一个元素的宽度(width+padding+border) el.offsetLeft 一个元素距离相对容器的水平偏移 el...
复制链接

扫一扫

专栏目录