JavaScript语言：offset家族成员详解

最新推荐文章于 2024-07-11 19:36:25 发布

一介大人物

最新推荐文章于 2024-07-11 19:36:25 发布

阅读量804

点赞数 1

分类专栏： javascript语言文章标签： javascript 图片语言鼠标函数

本文为博主原创文章，转载请说明来源。©ferryman

本文链接：https://blog.csdn.net/mythInternet/article/details/60962608

版权

javascript语言专栏收录该内容

1 篇文章 0 订阅

订阅专栏

offset家族成员详解

offset是什么，算什么？凭什么让我们这么辛苦的看望你，了解你，真的是搞笑，呵呵哒。

第一集：今天为什么这么无聊，要来开电脑，因为爱情？哎不说了，想想就要拿一卷卫生纸，你们先看着吧，我拿卫生纸其去了。未完待续。。。

其实实吧，是自己未出道之前，受恩师指导，现在很是怀念昔日的修炼时光，就在上一秒，翻出来看看，回忆回忆，悟出一些道理，然后呢，我就来和猿猴们来啰嗦几句，批斗offset这群逗比家族，让我们继续往下面看：

1.用图说话：offset族谱图：

offset: 自己的！

javascript中有一套方便的获取元素尺寸的办法就是offset家族；

第一集：续播》》哎，男人，哎，爱情，想想都痛，让我唱一首：为你付出那种真心你永远不了解，我还苦苦勉强爱上你的一切。。。爱你爱的死去活来，到头来我还是一只单身狗，宝宝心里苦，我想静静了。

2.offsetHight,offsetWidth：

注意：他们两个是得到对象的宽度和高度(自己的，与他人无关)!

话不多说，干活，看下面：
offsetWidth =  width  + border  +  padding   
div {  width:220px;  border-left:2px solid red; padding:10px;}
 div.offsetWidth =  220 + 2 + 20 
为什么不用 div.style.width？

因为div.style.width：只能得到行内的数值！！！（这个地方是重点需注意，也是新手经常混淆理解的地方。）

3.offsetLeft,offsetTop：

解释：返回距离上级盒子（最近的带有定位）左边的位置；

如果父级都没有定位则以body 为准,这里的父级指的是所有上一级不仅仅指的是,父亲,还可以是,爷爷,曾爷爷,

曾曾爷爷。。。还有很多很多爷爷，估计我们说三天三夜都说不完，反正是遇到为止，一路上都没追到，就找到祖先（body）。

offsetLeft：用一段代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0; padding: 0;}
        #yeye {
            position: relative;
            overflow: hidden;
            background-color: orange;
            width: 600px;
            height: 600px;
            padding: 100px;

        }
        #father {
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 100px;
            margin-left:30px;

        }
        #son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div id="yeye">
    <div id="father">
        <div id="son"></div>
    </div>
</div>

</body>
</html>
<script>
    var son = document.getElementById("son");
    console.log(son.offsetLeft);
</script>

运行结果图：

offsetLeft 从父级的padding 开始算父亲的border 不算

总结：就是子盒子到定位的父盒子边框到边框的距离

4.offsetParent:

offsetParent:返回改对象的父级（带有定位）,不是亲爸爸！！

1.如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2.如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

5.offsetTop与style.top区别:

1.最大区别在于 offsetLeft:可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以,只有定位的盒子才有 left,top,right

2.offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

style.left = 300px parseInt（300px）结果：300

parseInt（style.left） + parseInt（style.left）

3.offsetTop 只读，而 style.top 可读写。

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

5.最重要的区别 style.left 只能得到行内样式 offsetLeft 随便

哦哦哦，原来是这样，哎呀呀，发现新大陆了，快分享给你的道友咯。带着缺爱的心情，