2018-08-23 js获取元素宽高总结

最近项目中一些动效，轮播之类的，竟然发现干了这么久前端没有好好写过一个轮播之类的，
不过思路很简单，setInterval改变元素位置，比如改变transform margin position之类的属性。
但是还是有一些细节，比如无缝连接，首尾相接等还是需要稍作考量，而且发现了一个问题，就是在不停的改变"transform:translateY(`${height}`+px)"的时候会闪屏，
解决方案是给移动的元素添加css属性，如下:(当transform的元素背面显示时设置为不显示)

.element {
    //1
    -webkit-backface-visibility: hidden;  
    -moz-backface-visibility: hidden;  
    -ms-backface-visibility: hidden; 
     backface-visibility: hidden;  
    -webkit-perspective: 1000;  
    -moz-perspective: 1000;  
    -ms-perspective: 1000;  
    perspective: 1000; 
    //2
    transform:translate3d(0,0,0);
}

下面总结一下js中获取屏幕宽高的方法：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight

网页被卷去的高度和宽度： window.pageYOffset/window.pageXOffset
ie8之前使用document.body.scrollTop/window.body.scrollLeft

浏览器距离屏幕顶端的距离： window.screenTop
浏览器距离屏幕左端的距离： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

浏览器包括滚动条的宽高(即viewport)：window.innerWidth/window.innerHeight    
不包括滚动条（viewport）：document.documentElement.clientWidth/clientHeight

html的尺寸：document.documentElement.offsetWidth/offsetHeight

事件坐标：event.pageX,event,clientX,event.screenX
  pageX/Y：从``原点到事件触发点的CSS的 pixels
  clientX/Y：从viewport原点（浏览器窗口）到事件触发点的CSS的 pixels
  screenX/Y：从用户显示器窗口原点到事件触发点的设备 的 pixels。

JS获取dom元素的方法：

元素的实际高度： document.getElementById('thisIsId').offsetHeight
元素的实际宽度： document.getElementById('thisIsId').offSetWidth
//document.getElementsByClassName('thisIsClassName')[i].offsetHeight

元素的实际距离左边界的距离： document.getElementById('thisIsId').offsetLeft
元素的实际距离上边界的距离： document.getElementById('thisIsId').offsetTop

关于遍历dom元素的连接

jQuery获取屏幕高度：

$(document).ready(function(){
  console.log($(window).height()) //浏览器当前窗口可视区域高度
  console.log($(document).height()) //浏览器当前窗口文档的高度
  console.log($(document.body).height()) //浏览器当前窗口文档body的高度
  console.log($(documnet.body).outerHeight(true)) //浏览器当前窗口文档body的总高度，包括border padding margin
})