JS三大家族

最新推荐文章于 2021-12-04 02:05:06 发布

junlingshiwo

最新推荐文章于 2021-12-04 02:05:06 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_45722135/article/details/108253207

JS 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JavaScript中的offset家族，包括offsetWidth、offsetHeight、offsetLeft、offsetTop以及offsetParent属性，详细解析了它们的作用和用法，并通过案例说明了offset与style属性的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中有三大家族，分别是offSet家族、scroll家族、client家族。

一：offset家族：自己的，用于获取元素尺寸。

《1 offseWidth和offsetHeight：获取对象自身的宽度和高度，包括内容，边框，边距和内边距。

即：offsetWidth=width+border+padding；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 150px;
            background: red;
            padding: 10px;
            border: 5px solid #000;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box=document.getElementById('box');
    console.log(box.offsetWidth,box.offsetHeight);
    //console.log(box.style.width,box.style.height);
</script>

</body>
</html>

《2 offsetLeft和offsetTop：距离第一个有定位的父级盒子左边和上边的距离。

注意：父级盒子必须要有定位，如果没有，则最终以body为准！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 400px;
            height: 400px;
            background-color: red;
            margin: 40px;

        /*    定位*/
            position: relative;
        }
        #box{
            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>
    var box=document.getElementById('box');
    console.log(box.offsetLeft,box.offsetTop);
</script>

</body>
</html>

《3 offsetparent：返回当前对象父级（带有定位）盒子，可能是父级，也可能是爷爷。

如上图所示，就是找到最近的盒子，baba.

《4 offsetXXX和style.XXX的区别：

a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
d) offsetLeft是只读的，而style.left是可读写；
e) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。

案例：

天猫导航案例：

这个案例就是红色图标不管移动到哪个地方，但最终都会回到红色箭头那里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        body{background-color: pink}
        #nav{
            width: 900px;height: 63px;
            background: url("images/doubleOne.png")no-repeat right center #ffffff;
            border-radius: 5px;position: relative;margin: 100px auto;
        }
        #nav ul{position: relative;}
        #nav ul li{
            float: left;width: 88px;height: 63px;text-align: center;line-height: 70px;cursor: pointer;
        }
        #t_mall{
            width: 88px;height: 63px;background: url("images/tMall.png") no-repeat;position: absolute;
        }
    </style>
</head>
<body>
<nav id="nav">
    <span id="t_mall"></span>
    <ul>
        <li>双11狂欢</li>
        <li>服装会场</li>
        <li>数码家电</li>
        <li>家具建材</li>
        <li>母婴童装</li>
        <li>手机会场</li>
        <li>美妆会场</li>
        <li>进口会场</li>
        <li>飞猪旅行</li>
    </ul>
</nav>
<script>
   window.onload=function (ev) {
       //1获取需要的标签
       var nav=$('nav');
       var t_mall=nav.children[0];
       var ul=nav.children[1];
       var allLis=ul.children;

       //记录鼠标点击元素位置
       var beginX=0;

       //2遍历操作
       for (var i=0;i<allLis.length;i++){
           var li=allLis[i];
           //2.1监听鼠标进入
           li.onmouseover=function () {
               end=this.offsetLeft;
           }
           //2.2监听鼠标按下事件
           li.onmousedown=function () {
               beginX=this.offsetLeft;

           }

           //2.3 监听鼠标离开事件
           li.onmouseout=function () {
               end=beginX;
           }

       }
       //3缓动动画
       var begin=0,end=0;
       setInterval(function () {
           begin +=(end-begin) *0.2;
           t_mall.style.left=begin +'px';
       },10)
       function $(id) {
           return typeof id === "string" ? document.getElementById(id) : null;
       }
   }

</script>

</body>
</html>