Element获取元素位置二

Element.scrollLeft，Element.scrollTop

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取

xxxxxxxxxx
document.documentElement.scrollLeft
document.documentElement.scrollTop

Element.offsetHeight，Element.offsetWidth

Element.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。

这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0

Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移

xxxxxxxxxx
<div class="parent">
    <div class="box" id="box"></div>
</div>

xxxxxxxxxx
.parent{
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    left: 50px;
    top: 50px;
}

.box{
    width: 100px;
    height: 100px;
    background: yellow;
    position: relative;
    left: 50px;
    top: 50px;
}

xxxxxxxxxx
var box = document.getElementById("box");
console.log(box.offsetLeft);
console.log(box.offsetTop);

实时效果反馈

1. 以下哪个是获得元素的高度，包含内外边距和边框：

A offsetLeft offsetTop

B offsetHeight offsetWidth

C clientLeft clientTop

D clientHeight clientWidth

答案

1=>B