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;
}

转载于:https://www.cnblogs.com/sqh17/p/10217159.html

offset系列,client系列,scroll系列回顾相关推荐

网页特效offset、client、scroll系列属性的作用
元素偏移量 offset 系列可以动态的得到元素的位置(偏移).大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数字都不带单位 offset系列属性作用 el ...
js中offset、client、scroll【总结】
offset系列 offset动态的得到目标元素的位置(偏移)大小等 offset系列常用属性 offset系列属性作用 element.offsetParent 返回作为该元素带有定位的父级元素 ...
BOM对象及offset、client、scroll三大家族
文章目录 BOM对象 1. location 对象 location 对象的常用属性案例 location对象的常见方法 2. navigator对象 3.history对象 history对象常 ...
JS-元素大小深入学习-offset、client、scroll等学习研究笔记
一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生... 1.偏移量(offset dimension) 测试代码: 1 <!DOCTYPE html> 2 <ht ...
【JavaScript】offset、client、scroll
1. 元素偏移量offset 1.1 offset介绍 offset:偏移量,可以利用offset动态的获取元素在页面中的位置大小信息. 属性说明 offsetLeft 返回元素相对于带有定位的父元 ...
js中offset、client、scroll的区别
偏移量:offset dimension offsetHeight: 元素在垂直方向上占用的空间大小,以像素计.包括元素的高度.(可见的)水平滚动条的高度.上边框高度和下边框高度. offsetWid ...
document.body.offsetWidth 网页可见区域高宽，offset、client、scroll使用方法详解，页面位置距离
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
视窗宽高offset、client、scroll
先看盒子模型 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>视窗宽高</title> 5 < ...
31 元素滚动scroll系列
技术交流 QQ 群:1027579432,欢迎你的加入! 1.元素 scroll 系列属性使用 scroll 系列的相关属性可以动态的得到该元素的大小.滚动距离等. 2.页面被卷去的头部如果浏览器 ...

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

offset系列,client系列,scroll系列回顾相关推荐

最新文章

热门文章