27、JavaScript学习笔记——查看及操控窗口

最新推荐文章于 2024-07-23 17:56:42 发布

lvh98

最新推荐文章于 2024-07-23 17:56:42 发布

阅读量439

点赞数

分类专栏： web前端学习笔记（JavaScript篇）文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/lvh98/article/details/126453685

版权

web前端学习笔记（JavaScript篇）专栏收录该内容

28 篇文章 2 订阅

订阅专栏

查看及操控窗口

文章目录

查看及操控窗口

1. 获得窗口属性和元素尺寸

BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中有两重身份，一个是ES的Global对象，另一个就是浏览器窗口的JavaScript接口。

window对象被复用为ECMAScript的Global对象。

1.1 查看滚动条的滚动距离

浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限视口中查看文档。

window.pageXOffset/pageYOffset属性返回文档在窗口左上角水平和垂直方向滚动的像素。

IE8以及IE8以下不兼容

document.body.scrollLeft/scrollTop或document.documentElement.scrollLeft/scrollTop

兼容性比较混乱，两个不同时有值，其中一个有值，则另一个的值一定为0。因此用时通常取两者之和。

封装查看滚动条滚动距离的方法(解决兼容性)

function getScrollOffset() {
    if(window.pageXOffset) {
        return {
            x : window.pageXOffset,
            y : window.pageYOffset
        };
    } else {
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        };
    }
}

1.2 可视区窗口的属性

window.innerWidth/innerHeight返回浏览器窗口中页面视口的大小（不包含浏览器的边框和工具栏）

IE8以及IE8以下不兼容

document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容；
document.body.clientWidth/clientHeight适用于怪异模式下的浏览器。

目前浏览器的排版引擎使用三种模式：怪异模式、接近标准模式、以及标准模式。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。
标准模式的width和height指的是内容盒的宽高，而怪异模式则指的是边框盒的宽高；

封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

function getViewportOffset() {
    if(window.innerWidth){
        return {
            w : window.innerWidth,
            h : window.innerHeight
        };
    } else {
        if(document.compatMode === 'BackCompat'){
            return {
                w : document.body.clientWidth,
                h : document.body.clientHeight
            };
        } else {
            return {
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight
            };
        }
    }
}

1.3 查看元素的几何尺寸

.getBoundingClientRect();返回一个对象，对象中有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表该元素右下角的X和Y坐标。

这个方法的兼容性很好。

height和width属性老版本的IE并未实现。

返回的结果并不是实时的。获取元素尺寸并保存后，修改元素尺寸，之前保存的尺寸信息不会相应改变。

.offsetWidth/offsetHeight查看元素在水平/垂直方向上视觉上占用的像素尺寸（包括自身的宽/高，垂直/水平滚动条的宽度以及边框的宽度），同getBoundingClientRect()返回对象中的width和height。
.offsetLeft/offsetTop查看元素左/上边框到第一个存在定位的父级元素左/上边框的距离。