Web前端基础（11）offset家族

2018-10-13 · 大约 200 个字 · 预计 1 分钟读完

offset家族

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

offsetWidth和offsetHeight

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<style>
    #demo {
        height: 100px;
        width: 200px;
        padding: 5px;
        margin:3px;
        border: 8px solid #E9414C;
    }
</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>