三大系列总结(offset client scroll)

她还会来吗

于 2021-04-08 12:41:04 发布

阅读量134

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/m0_53895172/article/details/115515988

版权

本文详细介绍了CSS布局中offset、client和scroll三个系列的属性，包括offset的概述和与style的区别，通过拖拽模态框案例展示了offset的实际应用。接着讨论了client系列和scroll系列的特性和应用场景，最后总结了这三个系列的主要用法及其在实际开发中的作用。

摘要由CSDN通过智能技术生成

元素偏移量offset

offset概述

获得元素距离带有定位父元素的位置
如果子元素没有父亲或者父元素没有定位,则以body为准
获得元素自身的大小(包含padding+border+width)
注意:该属性返回的数值都不带单位

 <!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>
        *{
    
            margin: 0;
            padding: 0;
        }
        .father{
    
            position: relative;
            width: 400px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
        .son{
    
            width: 200px;
            height: 100px;
            background-color: purple;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
<script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son');
    // console.log(father.offsetLeft);// 100
    // console.log(father.offsetTop);//100
    console.log(father.offsetWidth);//400
    // console.log(son.offsetLeft);//100
    // console.log(son.offsetTop);// 0
    console.log(son.offsetWidth);//200
</script>
</html>

ofset与style的区别

offset

offset可以得到任意样式表中的样式值
offset系列获得的数值是没有单位的
offserWidth包含padding+border+width
offsetWidth等属性是只读属性,只能获取不能赋值
用offset获取元素大小位置更加合适

style

style只能得到行内样式表中的样式值
style.width获得的是带有单位的值
style.width是可读写属性,可以获取也可以赋值
style适合于给元素更改值

拖拽模态框案例

点击弹出层,显示模态框和遮挡层
点击关闭按钮,隐藏模态框和遮挡层
在页面中拖拽原理,鼠标按下并且移动,之后松开鼠标
鼠标移动过程中,获得最新的值给模态框的left和top值
模态框真正位置为鼠标坐标减去鼠标在盒子内的坐标

html代码

<body>
    <div class="login-header">

最低0.47元/天解锁文章

她还会来吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三大系列总结(offset client scroll)

元素偏移量offsetoffset概述获得元素距离带有定位父元素的位置如果子元素没有父亲或者父元素没有定位,则以body为准获得元素自身的大小(包含padding+border+width)注意:该属性返回的数值都不带单位 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
复制链接

扫一扫

专栏目录