JS中关于尺寸和位置的汇总

window的属性

• innerWidth / innerHeight---视口的宽高
• outerWidth / outerHeight---浏览器窗口的宽高

window.innerWidth 视口的宽度

DOM元素的尺寸和位置

尺寸大小：(只读)

• offsetWidth / offsetHeight---内容宽高+内边距宽高+边框
• clientWidth / clientHeight---内容宽高+内边距宽高
• scrollWidth / scrollHeight---如子元素未溢出，同client系列；若溢出，子元素的宽高+一个方向的内边距

• getBoundingClientRect()---返回对象中的width和height（IE8以下不兼容 ）
  IE8中无width和height属性

   width = element.getBoundingClientRect().right - element.getBoundingClientRect().left  
   height = element.getBoundingClientRect().bottom - element.getBoundingClientRect().top  

位置：(只读)

• offsetLeft / offsetTop---元素的位置，在第一个定位的祖先元素的位置，如无定位就在根元素上的位置
• clientLeft / clientTop---元素自身的边框位置

• getBoundingClientRect()

    left（x）        元素最左边距离视口左边的距离  
     top (y)        元素最上边距离视口上边的距离  
     right       元素最右边距离视口左边的距离  
     bottom      元素最下边距离视口上边的距离  
  

内容的位置：(可读可写)

• scrollLeft / scrollTop 元素滚动位置，值增大内容向左/上滚动
• 生效条件：子元素溢出，父元素设置overflow:hidden/auto/scroll

Event对象位置

鼠标事件对象 MouseEvent

• clientX / clientY---鼠标在视口上的位置
• offsetX / offsetY---鼠标在元素上的位置
• pageX / pageY ---鼠标在页面上（根元素上）的位置
• screenX / screenY---鼠标在屏幕上的位置
• button---鼠标按键键值 （0表示左键，1表示滑轮， 2表示右键）

键盘事件对象 keyboardEvent

• keycode/which--键盘对应的ASCII码（按键）
• key---键盘按键的值（返回的是字符串）

触摸事件对象touch

• clientX/clientY---触点在视口上的位置
• pageX/pageY---触点在页面上的位置
• screenX/screenY---触点在屏幕上的位置

 box.addEventListener('touchstart',function (event) {
    console.log(event.touches);  //一个手指触摸时输出   Touchlist{0:Touch,length:1}
    var startX = event.touches[0].clientX; //触点在视口上的位置
 }

说明：笔者只是个在前端道路上默默摸索的初学者，若本文涉及错误请及时给予纠正，如果本文对您有帮助的话，请点赞收藏关注，你的认可是我前进的动力，谢谢！