浏览器窗口大小-网页大小-元素位置

james 发布于2019-08-22 16:11 / 1100人阅读

摘要：部分摘录自阮一峰老师博客浏览器窗口大小视窗一张网页的全部面积，就是它的大小。是包括右边滚动条的宽度的网页大小如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的和应该相等。

部分摘录自阮一峰老师博客:

浏览器窗口大小(视窗)

一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。
浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。

注意事项

必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错

clientWidth和clientHeight都是只读属性，不能对它们赋值。

window.innerWidth是包括右边滚动条的宽度的

    const getViewport = () =>{
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

网页大小

如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的clientWidth和scrollWidth应该相等。但是实际上，不同浏览器有不同的处理，这两个值未必相等。所以，我们需要取它们之中较大的那个值

    const getPageArea = () =>{
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
         }
    }

网页元素绝对位置

指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

不断累加offsetParent的offsetTop和offsetLeft属性

由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。

   function getElementLeft(element){
       var actualLeft = element.offsetLeft;
       var current = element.offsetParent;
   
       while (current !== null){
           actualLeft += current.offsetLeft;
           current = current.offsetParent;
       }
       return actualLeft;
   }
   function getElementTop(element){
       var actualTop = element.offsetTop;
       var current = element.offsetParent;
   
       while (current !== null){
           actualTop += current.offsetTop;
           current = current.offsetParent;
       }
       return actualTop;
   }

利用getBoundingClientRect方法

此方法其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离.(其实也就是网页元素的相对位置)

   　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
   
   　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

网页元素相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。

有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了也就是减去document.documentElement.scrollLeft|scrollTop

    //快捷方法
    var X= this.getBoundingClientRect().left;
    
　　 var Y =this.getBoundingClientRect().top;

滚动位置

返回当前页面的滚动位置。请使用pageXOffset和pageYOffset，如果已定义，否则使用scrollLeft和scrollTop。你可以省略el来使用窗口的默认值。pageXOffset是scrollY的别名(event.pageX是鼠标活动事件的属性)

    const getScrollPosition = (el = window) =>{
        return ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
    }
      
    // getScrollPosition() -> {x: 0, y: 200}

返回页面顶部

    const scrollToTop = () =>{
        const distance = document.documentElement.scrollTop
        if(distance > 0){
            window.requestAnimationFrame(scrollToTop)
            window.scrollTo(0, distance - distance/8)
        }
    }

GPU云服务器云服务器窗口大小元素大小 java修改窗口大小 asp控制窗口的大小

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94114.html

网页与浏览器窗口の真理

摘要：参考资料首先，网页大小与浏览器窗口大小从来都不是一回事这尼玛最近才明白，坑所以，要知道以下常网页的范围我们在代码里面设置的或者脚本，改变的样式就是网页范围下的改变，也就是说，我们设置的大小是网页的不是浏览器窗口的大小。参考资料首先，网页大小与浏览器窗口大小从来都不是一回事！！！这尼玛最近才明白，坑~ 所以，要知道以下常: 网页的范围我们在代码里面设置的CSS或者js脚本，改变的样式...

tinysun1234 2019-08-30 12:44 评论0 收藏0
浏览器的各种位置值获取

摘要：包括和属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。网页元素的位置那就是使用方法。就是透过浏览器看内容的这个区域高度。获取网页的大小一张网页的全部面积，就是它的大小，通常是由内容和css样式表决定的。浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做viewport...

lvzishen 2019-08-21 11:53 评论0 收藏0
CSS布局模型

摘要：在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。内联元素可不像块状元素这么霸道独占一行浮动模型块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢不要着急，设置元素浮动就可以实现这一愿望。1、流动模型（Flow）　　　　流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。　　　　流...

weakish 2019-04-23 11:58 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

blastz 2019-08-30 13:50 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

shiina 2019-08-01 17:52 评论0 收藏0