offset系列,client系列,scroll系列回顾

一 scroll系列属性 ——滚动

1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度

ele.scrollHeight 有两种情况，

当内容超出盒子范围后，返回的是内容的高度，包括padding，从顶部内侧到内容的最外部分。

当内容不超出盒子范围时，返回的是盒子的高度，就是 ele.scrollHeight == ele.clientHeight,最小值就是ele.clientHeight

ele.scrollWidth 情况同 ele.scrollHeight一样。

当内容超出盒子范围后，返回的是内容的宽度，包括padding，从左边内侧到内容的最外部分。

当内容不超出盒子范围时，返回的是盒子的宽度，就是 ele.scrollWidth == ele.clientWidth,最小值就是ele.clientHeight

各个浏览器说法不一：

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

2 scrollTop／scrollLeft

ele.scrollTop 滚动时返回的是被卷去部分的顶部到可视区域的顶部，看图

ele.scrollLeft 滚动时返回的是被卷去部分的左侧到可视区域的左侧，看图

函数封装 ----获取卷曲的宽度和高度

function myScroll() {
    return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0　　
     }
}

　　 eg：document.documentElement-----html标签

　　　　document.body ------body内部

ps！想要实时获取页面卷曲的高度或宽度，必须在事件内进行

window.onscroll = function(){}

3 scrollTo

window.scrollTo(1500,2000);//参数1 表示横向滚动到的位置 //参数2 表示纵向滚动到的位置

二 client系列属性 ——可视

1. clientWidth／clientHeight

ele.clientWidth 返回元素内部空间的宽度（width+padding）,是一个只读属性。不包含border和margin以及纵向滚动条。

(ele.clientWidth = width + padding - 滚动条的高度)

ele.clientHeight 返回元素内部空间的高度（height+padding）,是一个只读属性。不包含border和margin以及横向滚动条。

(Ele.clientHeight = height + padding - 滚动条的宽度)

@ 和offsetWidth／offsetHeight 的区别：

offsetWidth包含border，而clientWidth不包含border。

scrollHeight的最小值和clientHeight相同

2 clientTop／clientLeft

ele.clientTop 表示一个元素的左边框的宽度，以像素表示。是一个只读属性

如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度（默认17px）。

clientLeft 不包括左外边距和左内边距

（ele.clientLeft = border-left-width + 滚动条的宽度）

ele.clientLeft 一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。

（ele.clientTop = border-top-width）

函数封装：

function myClient() {
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    }
}

三 offset系列的属性

　1. offsetWidth／offsetHeight

　　 ele.offsetWidth 它返回该元素的像素宽度，（box-sizing:content-box）默认情况下：宽度包含该元素的水平内边距和边框，（除了margin以外：border+padding+width）且是一个整数　　ele.offsetHeight 它返回该元素的像素高度（box-sizing:content-box）默认情况下：高度包含该元素的垂直内边距和边框，（除了margin以外：border+padding+width）且是一个整数

ps：元素的offsetHeight，offsetWidth是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条或纵向滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度

　　 offsetWidth和offsetHeight是用来得到元素的大小

　　 @offsetHeight 和 style.height的区别

　　　　demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取

　　　　style.height是字符串（而且带单位），offsetHeight是数值

　　　　demo.style.height可以设置行内样式，offsetHeight是只读属性

　 2. offsetLeft／offsetTop

　ele.offsetLeft 到距离自身最近的（带有定位的）父元素的左侧的距离,如果所有父级都没有定位则以body 为准.

　　offsetLeft 是自身border左侧到父级padding左侧的距离 -----数值

　ele.offsetTop 到距离自身最近的（带有定位的）父元素的顶侧的距离,如果所有父级都没有定位则以body 为准. ----数值

　　 offsetLeft和offsetTop是用来得到元素的位置

　　@offsetLeft和style.left的区别

　　　　style.left只能获取行内样式

　　　　offsetLeft只读，style.left可读可写

　　　　offsetLeft是数值，style.left是字符串并且有单位px

　　如果没有加定位，style.left获取的数值可能是无效的

　　最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

　　计算方式：从定位的父盒子的边框内部，计算到子盒子的边框外部（边框到边框）

特点：

1、offsetLeft属性没有单位，是纯数值

2、offsetLeft属性是只读的，不可修改

3、offsetLeft属性若有小数，会四舍五入进位

　3.offsetParent 获取到当前元素外面的定位父盒子

　　HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

　　(offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。)

　　 @ offsetParent和parentNode的区别

　　　　父元素parentNode，一定是亲爹，外面紧挨着的元素

　　　　定位父盒子offsetParent，干爹（有可能是亲爹，也可能不是亲爹）

　方法：

// 获取所选元素到浏览器最左边的距离

var getOffsetLeft = function(obj){
   var tmp = obj.offsetLeft;
   var val = obj.offsetParent;
   while(val != null){
       tmp += val.offsetLeft;
       val = val.offsetParent;
   }
   return tmp;
}

//获取所选元素到浏览器最上边的距离

var getOffsetTop = function(obj){
   var tmp = obj.offsetTop;
   var val = obj.offsetParent;
   while(val != null){
       tmp += val.offsetTop;
       val = val.offsetParent;
   }
   return tmp;
}

offset系列,client系列,scroll系列回顾

猜你喜欢