js学习笔记（三大家族—offset家族）

最新推荐文章于 2021-12-25 18:01:40 发布

甜甜今天学了吗

最新推荐文章于 2021-12-25 18:01:40 发布

阅读量301

点赞数

文章标签： js html css

本文链接：https://blog.csdn.net/dawanhjiao/article/details/105197054

版权

三大家族

一、offset家族

1.概念
offset自己的，用来获取元素尺寸
2.属性
（1）offsetWidth和offsetHeight
获取自身的宽度和高度，包括内容、边框和内边距
offsetWidth = content + border + padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 200px;
            height: 150px;
            background-color: red;
            padding: 10px;
            border: 5px solid #000;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    window.onload = function (ev) {
      var box = document.getElementById('box');
      console.log(box.offsetWidth);//230
      console.log(box.offsetHeight);//180
      console.log(box.style.width, box.style.height);//取不到结果，style只能拿行内的
    };
</script>
</body>
</html>

.style.width

<body>
<div id="box" style="width: 200px; height: 300px;"></div>
<script>
    window.onload = function (ev) {
      var box = document.getElementById('box');
     console.log(box.style.width, box.style.height);
      //只能拿到内容的宽度
      //200px,300px
    };
</script>
</body>

（2）offsetLeft和offsetTop
距离第一个有定位的父盒子左边和上边的距离（从里往外找）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #father{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: red;
            margin: 40px;
        }
        #box{
            position: absolute;
            width: 200px;
            height: 150px;
            background-color: blue;
            padding: 10px;
            border: 5px solid #000;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="box"></div>
</div>
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        console.log(box.offsetLeft, box.offsetTop);
        //30,0
    };
</script>
</body>
</html>

如果父盒子没有定位，则最终以body为准
（3）offsetParent
返回当前对象的父级（带有定位）的盒子，可能父亲、也可能是爷爷······（从里往外找）

<body>
<div id="yeye" style="position: relative">
    <div id="father" style="position: relative">
        <div id="box"></div>
    </div>
</div>

<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        console.log(box.offsetParent);
        //是father，两个都有定位，但是是从里往外找的
    };
</script>
</body>

如果父级盒子没有定位，则最终以body为准
.parentNode

<body>
<div id="yeye" >
    <div id="father">
        <div id="box"></div>
    </div>
</div>
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        console.log(box.parentNode);//无论有没有定位，拿到的都是父节点
    };
</script>

（4）stylexxx和offsetxxx的区别
①style只能拿行内的；而offset可以获取到所有的
②style可以返回没有定位的；而offset只能返回有定位的（除去offsetWidth和offsetHeight）
③style返回的是字符串，除了数字之外还有单位：px；而offset返回的是数字
④style是可读可写的；而offset只是可读的
offsetxxx

<body>
<div id="box" style="width: 100px; height: 100px;"></div>
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        box.offsetWidth = 200;
        console.log(box.offsetWidth);
        //100,不能编辑，也就是不能改变
    };
</script>
</body>

stylexxx

<body>
<div id="box" style="width: 100px; height: 100px;"></div>
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        box.style.width = 200 +'px';
        console.log(box.style.width);
        //200px,可以编辑
    };
</script>
</body>

⑤如果没有给当前元素指定过top样式，则style.top返回的是空字符串

甜甜今天学了吗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（三大家族—offset家族）

三大家族一、offset家族1.概念offset自己的，用来获取元素尺寸2.属性（1）offsetWidth和offsetHeight获取自身的宽度和高度，包括内容、边框和内边距offsetWidth = content + border + padding<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫