JS-获取窗口属性

最新推荐文章于 2023-06-26 18:46:12 发布

wkxjhngw

最新推荐文章于 2023-06-26 18:46:12 发布

阅读量312

点赞数

分类专栏： JS学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50945128/article/details/120072562

版权

JS学习笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

查看滚动条的滚动距离

window.pageXOffset/pageYOffset : IE8及IE8以下不兼容

document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值，互相冲突

练习 : 封装兼容性方法，求滚动轮滚动距离 getScrollOffset()

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
        }
    }
}

查看视口的尺寸

可视区窗口 --> 编写的html文档可以看见的部分

window.innerWidth/innerHeight : IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight : 标准模式下，任意浏览器都兼容（client：客户端

document.body.clientWidth/clientHeight : 适用于怪异模式下的浏览器

<!DOCTYPE html>渲染模式为标准模式（文档类型
怪异模式：向后兼容（之前的，例：IE7启动了怪异模式后，它的语法规则就不再是IE7，而是IE6）

渲染模式：识别语法把它绘制成页面
标准模式：
怪异/混杂模式：识别的语法不再是最新的语法，而是之前的语法

document.compatMode 判断渲染模式（compat：兼容性
CSS1Compat：标准模式
BackCompat：向后兼容

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

function getViewportOffset( ) {
    if(0 && 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
            }
        }
    }
}

查看元素的几何尺寸

domEle.getBoundingClientRect(); es5的新方法
rect:矩形

兼容性很好

该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标

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

返回的结果并不是“实时的"

查看元素的尺寸

dom.offsetWidth，dom.offsetlleight （求视觉上的尺寸，padding也会算进去

查看元素的位置

dom.offsetleft, dom.offsetTop （不管自身是否为定位元素，与父级元素有距离，就会返回值

对于无定位父级的元素，返回相对文档的坐标。
对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。

dom.offsetParent

返回最近的有定位的父级，如无，返回body,
body.offsetParent返回null

eg:求元素相对于文档的坐标getElementPosition

让滚动条滚动

window上有三个方法

scroll(x,y)，scrollTo(x,y)， scrollBy();

三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。

区别:scrollBy()会在之前的数据基础之上做累加。

eg: 利用scrollBy()快速阅读的功能

    var start = document.getElementsByTagName('div')[0];
    var stop = document.getElementsByTagName('div')[1];
    var timer = 0;

    start.onclick = function () {
        timer = setInterval(function () {
            window.scrollBy(0,10);
        },100);       
    }
    stop.onclick = function () {
        clearInterval(timer);
    }   // 多次点击start后停不住

    // 改善后
    var key = true;
    start.onclick = function () {
        if(key) {
            timer = setInterval(function () {
                window.scrollBy(0,10);
            },100);
            key = false;
        }   
    }
    stop.onclick = function () {
        clearInterval(timer);
        key = true;
    }

wkxjhngw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS-获取窗口属性

查看滚动条的滚动距离window.pageXOffset/pageYOffset : IE8及IE8以下不兼容document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值，互相冲突练习 : 封装兼容性方法，求滚动轮滚动距离 getScrollOffset()function getScrollOffset() { if (window. pageXOffset) { retu
复制链接

扫一扫