DOM操作-页面的尺寸与位置

浏览器自身尺寸与位置：

浏览器窗口的内宽高：可视区域宽高

        window.innerWidth window.innerHeight

浏览器窗口外边高：浏览器界面宽高

        window.outerWidth window.outerHeight

浏览器窗口距离电脑屏幕左边界、上边界的值

        window.screenLeft window.screenTop

窗口水平方向、垂直方向的滚动值

        window.scrollX window.scrollY

尺寸及相对于父级的位置：

标签.offsetParent 父级

clientWidth = width + 左右padding clientHeigh = height + 上下padding	标签.clientWidth 标签.clientHeight
offsetWidth = width + 左右padding + 左右boder offsetHeigh = height + 上下padding + 上下boder	标签.offsetWidth 标签.offsetHeigh
clientLeft = boder.left(左边框的宽度) clientTop = boder.top(上边框的宽度)	标签.clientLeft 标签.clientTop

标签.offsetLeft        标签.offsetTop

offsetTop、offsetLeft：当前元素上边框外边缘到最近的已定位父级(offsetParent)上边框内边缘的距离。如果父级都没有定位，则分别是到body顶部和左边的距离

scrollWidth和scrollHeight、scrollTop和scrollLeft

标签.scrollWidth        标签.scrollHeight

适用于当元素尺寸过大，产生滑动条的情况

没有滑动条时scrollWidth  ==  clientWidth

scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）

scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）

标签.scrollLeft        标签.scrollTop

Html使用时获取页面距离顶部的距离

点击点的位置：

标签.addEventListener("类型",function(event){
    //相对于整个页面
    event.pageX event.pageY

    //相对于可视页面
    event.clientX event.clientY
    event.x event.y

    //相对于上一个定位元素的左上角
    event.layerX event.layerY

    //相对于被点击元素的左上角
    event.offsetX event.offsetY

    //相对于电脑屏幕左边界、上边界的值
    event.screenX event.screenY
})

页面定位：

behavior：行为、习惯；smooth：平滑过渡；auto：勿过度

scrollTo({
    top: 0,	// 距离页面顶部的距离
    left: 0,	// 距离页面左侧的距离
    behavior: "smooth",
});

// 瞬间回到顶部没有过渡效果
//scrollTo(0, 0)	等于	html.scrollTop = 0