前端Js常用宽高及位置

一个页面显示在浏览器内,浏览器又放置在屏幕窗口内,所以由里向外便是 页面 , 浏览器 , 屏幕 三者.

1.屏幕尺寸

 

screen.availHeight(window.screen.availHeight): 屏幕可用高度

screen.availWidth: 屏幕可用宽度

screen.height: 屏幕分辨率高度

screen.width: 屏幕分辨率宽度

2.浏览器尺寸

 

window.outerHeight: 浏览器高度 , 此高度包含了水平滚动条的高度(若存在)。

window.outerWidth: 浏览器宽度

window.innerHeight: 页面可用高度

window.innerWidth: 页面可用宽度

window.outerHeight - window.innerHeight: 工具栏高度

window.screenTop  浏览器距屏幕顶部的距离

3 页面尺寸

1 3种宽高属性

1. clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度
2. offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度
3. scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）

 2 body对象

标准文档流下  以百度为示例

document.body.clientHeight;

document.body.offsetHeight;
document.body.scrollHeight;

这三个数值是相等的  表示文档流宽高, 且不会随浏览器缩放变化(文档内容不会变的前提下)

document.body.scrollTop  一直是0

3 html对象

标准文档流下  以百度为示例  //  document.documentElement 返回html对象

document.documentElement.offsetHeight

document.documentElement.scrollHeight

两个值相等 表示文档流宽高, 且不会随浏览器缩放变化(文档内容不会变的前提下)

document.documentElement.clientHeight 与 window.innerHeight相等  :  表示页面可用高度;
document.documentElement.scrollTop :  网页被卷去的高 (页面距顶部滚动距离);

4鼠标事件中的坐标

点击位置距离当前body可视区域的x，y坐标：clientX、clientY

对于整个页面来说，包括了被卷去的body部分的长度：pageX、pageY

点击位置距离当前电脑屏幕的x，y坐标：screenX、screenY

相对于带有定位的父盒子的x，y坐标：offsetX、offsetY

和screenX、screenY一样：x、y

5 Element.getBoundingClientRect()函数

返回值是一个 DOMRect 对象，DOMRect 对象包含了一组用于描述边框的只读属性。width、height是元素自身的宽高+padding+border，top、bottom、left、right是元素的上下左右边界到视口左上角的距离。

    .content {

      margin: 20px;

      width: 100px;

      height: 100px;

      padding: 10px;

      border: 2px solid #f00;

      overflow: scroll;

}

6 滚动距离

1. offsetTop：为容器相对于document的top的绝对偏移---→等于top+margin-top
2. clientTop: 容器内部相对于容器本身的top偏移，实际就是border-width
3. scrollTop: Y轴的滚动条没有，或滚到最上时是0；Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight  是正常的滚动距离，否则就是滚动过头了（手机上的阻尼效果）。

   * {

         margin: 0;

         padding: 0;

       }

       .content {

         height: 50px;

         border: 2px solid #f00;

         overflow: scroll;

         margin-top: 50px;

   }

 

 7 各个浏览器间差异较大 实际项目 考虑jquery获取宽高