获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

$(window).width 屏幕可视区域的宽高,不包括滚动条与工具条
document.documentElement.clientWidth 屏幕可视区域的宽高,不包括滚动条与工具条。
window.innerWidth 获得可视区域的宽高,包含纵向滚动条的宽度,IE8和以下不支持
window.outerWidth 获得加上工具条与滚动条窗口的宽度,IE8和以下不支持
document.body.clientWidth 获得body内容的高度
offsetWidth 返回本身的宽高+padding+border+滚动条
offsetLeft 
1、相对于已定位元素的后代元素和一些其他元素,这些属性返回的坐标是相对于祖先元素
2、一般元素,则是相对于文档,返回的是文档坐标。
offsetParent属性指定这些属性所相对的父元素,如果offsetParent为Null,则这些属性都是文档坐标
function getElementPosition(e){
  var x=0;y=0;
   while(e!=null){
     x +=e.offsetLeft;
     y +=e.offsetTop;
     e = e.offsetParent;
    }
    return{x:x,y:y}
}
scrollWidth  content+padding+任何溢出内容的尺寸,所以如果没有溢出时,这些属性与clientWidth一致
scrollLeft 指定的是元素的滚动条的位置,可写,通过设置来让元素内容滚动

引用参考:https://segmentfault.com/a/1190000010746091

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页