javaScript的三大家族

三大家族(offset/scroll/client)

快速查看
scrollTop/Left一般都是应用于计算浏览器卷去的部分,而且有兼容性问题,所以下面会举例将他们封装起来

offsetHeight:      元素高,height+border+padding
offsetWidth:       元素宽,width+border+padding
offsetTop:         上边距离带有定位的父盒子的距离(重要)
offsetLeft:		   左边距离带有定位的父盒子的距离(重要)
offsetParent:	   最近的带有定位的父盒子


scrollHeight:  		 内容高,不含border(内容!!!)
scrollWidth:         内容宽,不含border  (内容!!!)
scrollTop:  			
	document.documentELement.scrollTop || document.body.scrollTop || window.pageXOffset;; (重要)
			浏览器调用:浏览器页面被卷去的头部
	    	元素调用:必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。子盒子被遮挡住的头部
			
scrollLeft: 	document.documentELement.scrollLeft:  || document.body.scrollLeft: ; (重要)window.pageYOffset;
			浏览器调用:浏览器页面被卷去的左侧
	    	元素调用:必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。子盒子被遮挡住的左侧


clientHeight:   元素高,height+padding;   	
		window.innerHeight;	document.body.clientHeight     可视区域的高
clientWidth:    元素宽,width+padding;	  	
		window.innerWidth;	document.documentElementWidth; 可视区域的宽
		
clientTop:   	元素的上border宽
clientLeft:    	元素的左border宽

clientY		调用者:event.clientY(event)(重要)
		作用:鼠标距离浏览器可视区域的距离,上
clientX		调用者:event.clientX(event)(重要)
		作用:鼠标距离浏览器可视区域的距离,左			

offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 
而 style.left不可以

二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
style.left只能获取行内式,如果没有返回“”;

三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)

四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。

1、offset家族 —表示偏移、位移的意思

offsetWidthoffsetHightoffsetLeftoffsetTopoffsetParent共同组成了offset家族。

a、offsetHight /offsetWidth

offset宽/高  =  盒子自身的宽/高 + padding +border;

offsetWidth = width+padding+border;

offsetHeight = Height+padding+border;

b、offsetLeft和offsetTop

检测距离父盒子有定位的左/上面的距离,如果父级都没有定位则以body为准。

offsetLeft == style.left(去掉px)

c、offsetParent

offsetParent 取最近的那个带定位父级元素。

2、Scroll家族

ScrollWidth 和 scrollHeight(不包括border)---盒子内容的宽高。
(!!!如果有内容超出了,显示内容的高度)

1.7.2	scrollTop 和 scrollLeft---网页,被浏览器遮挡的头部和左边部分。
(!!!感觉都是由于在浏览器上,用在盒子上没有效果)

兼容性写法

var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

3、onscroll事件

只要页面滚动就会触发

window.scrollTo 
方法可把内容滚动到指定的坐标。
格式:
scrollTo(xpos,ypos)
xpos	必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos	必需。要在窗口文档显示区左上角显示的文档的 y 坐标

client家族

1、clientWidth	获取网页可视区域宽度(两种用法)
   clientHeight	获取网页可视区域高度(两种用法)
 调用者不同,意义不同:
	 		盒子调用:	 		指盒子本身。
			body/html调用:		可视区域大小。	
			
2、clientX       鼠标距离可视区域左侧距离(event调用)
clientY       鼠标距离可视区域上侧距离(event调用)

3、clientTop/clientLeft 		盒子的border宽高
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值