offset client scroll三大家族介绍及案例应用

最新推荐文章于 2024-05-23 23:33:04 发布

VIP文章 WangZhang_521

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量516

点赞数

分类专栏： Web API 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/WangZhang_521/article/details/123530563

版权

01-offset系列属性

<!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>offset系列属性</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        .father {
    
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
        
        .son {
    
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        
        .w {
    
            /* width: 200px; */
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        //  offset系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');

        // 1.可以得到元素的偏移 位置 返回不带单位的数值
        console.log(father.offsetTop); //100
        console.log(father.offsetLeft); //100
        // 它以带有定位的父亲为准，如果没有父亲或者父亲没有定位，它以body为准
        console.log(son.offsetLeft); //父亲没有定位是145 父亲加了定位后变为45

        // 2.可以得到元素的大小 高度和宽度 是包含padding和border的，不包含maigin
        var w = document.querySelector('.w');
        console.log(w.offsetWidth); //200  padding会撑大盒子，加了10px的padding后，宽度和高度都变为220
        console.log(w.offsetHeight); //200   border会撑大盒子，加了15px的padding后，宽度和高度由原来的220变为250

        // 3.可以得到带有定位的父级，否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父级 
        console.log(son.parentNode); //返回父亲 是最近一级的父亲 亲爸爸 不管有没有定位
    </script>
</body>

</html>

02-offset与style区别

<!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>offset与style区别</title>
    <style>
        .box {
    
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="box" style="width: 200px;"></div>
    <script>
        // offset与style区别
        var box = document.querySelector('.box');
        // 1.style只能得到行内样式表的样式值 offset可以得到任意样式表中的的样式值
        console.log(box.offsetWidth);
        console.log(box.style.width);
        // 2.offset系列获得的数值是没有单位的 style.width获得是带有单位的字符串
        // 3.offsetWidth包含padding,border和width style.width获得不包含padding和border的值
        // 4.offsetWidth等属性是只读属性，只能获取不能赋值改变 style.width是可读写属性，可以获取也可以赋值更改值的大小
        // 5.所以，如果我们想要获取元素大小，用offset更合适 想要给元素更改值，则需要用style.width
        // box.offsetWidth='300px';无效
        box.style.width = '300px';
    </script>
</body>

</html>

03-获取鼠标在盒子内的坐标

<!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: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px;
        }
    </style>

最低0.47元/天解锁文章

WangZhang_521

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
offset client scroll三大家族介绍及案例应用

01-offset系列属性<!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"> &
复制链接

扫一扫