Web前端基础（11）offset家族

发表于 | 更新于 | 分类于 ，

offset家族

offset 单词本身是偏移量的意思， JavaScript中有一套获取元素尺寸和位置的方法，就是通过offset家族来实现的。

offsetWidth和offsetHeight

得到对象自己的宽度和高度。这个高度和宽度是对象自己所占用的实际高度，包括padding和边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
<style>
    #demo {
        height: 100px;
        width: 200px;
        padding: 5px;
        margin:3px;
        border: 8px solid #E9414C;
    }
</style>
</style>
<div id="demo"></div>
<script>
    var demo = document.getElementById("demo");
    console.log(demo.style.width);   //style.width 只能得到行内样式的宽度
    console.log("offsetWidth", demo.offsetWidth);   //200 + 5 * 2 + 2 * 8 
    console.log("offsetHeight", demo.offsetHeight); 
</script>

offsetLeft和offsetTop

返回距离上级盒子（带有定位）左边的位置。因为和定位有关所以没有offsetRight和offsetBottom。如果父级（所有上层容器）都没有定位则以body位置作为参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    body{
        padding:0px;
        margin:0px;
    }
    #demo {
        height: 100px;
        width: 200px;
        padding: 5px;
        margin:3px;
        border: 8px solid #E9414C;
    }
</style>

上面的div我们将body的默认距离去掉，发现div的offsetLeft和Top是div的margin距离。说明offsetLeft是div距离body的距离加上自身margin的距离，假如将body的padding设置为10则offsetLeft就是13px。

我们再试想，如果给定位父级加上margin，border呢？结果发现和margin和boder无关。

结论：实际上可以说是自己可见位置到父级定位元素的内边框距离。

clientWidth和clientHeight

clientWidth和offsetWidth的区别是clientWidth是不含border的内边框宽度。

如上图深色橙色区域是border， 白色区域则是clientWidth和offsetHeight。

scorllWidth和scrollHeight

scrollWidth和scrollHeight则是实际的文本内容所占宽高加上padding的距离。

scrollWidth = 文本宽度 + padding;
scrollHeight = 实际文本高度 + padding;

style尺寸

我们可以通过style获得以下距离。

style.border : 获取边框宽度。
style.padding : 获取padding值。
style.margin: 获取margin值。