javascript之PC网页端特效

**

PC网页端特效

**

1.1元素偏移量offset概述

可以动态获得该元素的位置（偏移），大小，返回值都不带单位。

1.2offset属性

通常来获得元素的位置

element.offsetTop		//返回元素相对带有定位的父元素上方的偏移
element.offsetLeft		//返回元素相对带有定位的父元素左方的偏移
element.offseWidth		//返回元素的宽度
element.offseHeight		//返回元素的高度		大小包含边距边框
element.offseParent		//返回带有定位的父亲，父亲无定位，返回body

注：与element.parentNode的区别：parentNode不管父亲有没有定位，都返回最近的父亲。

1.3offset与style的区别

1．offset可以得到任意样式表中的样式值，style只能得到行内样式中的样式值。

2．offset得到的时数值型的，不到单位，style得到的时字符串型的，不带单位。

3．offset包含带有边距边框的值，style不包含。

4．offset只能只读不能赋值，style是可读写属性

注意：以后如果只获取元素大小位置，可使用offset，如果要给元素更改值，需要用style

2.1 client属性

通常来获取元素的大小

1．element.clientWidth		//返回padding，内容区的宽度，不包含边框。
2．element.clientHeight		//返回padding，内容区的高度，不包含边框。
3．element.clientTop		//返回上边框的大小
4．element.clientLeft		//返回左边框的大小

注意：与offset的区别在于边框上

3.1立即执行函数

1，( function () {} ) ()
2．( function () {} () )
//也可以传递参数

4.1 scroll元素滚动

通常来获取滚动的距离

1．element.scrollWidth		//返回padding，内容区的宽度，不包含边框。
2．element.scrollHeight		//返回padding，内容区的高度，不包含边框。
//与client的本质区别：scroll可以动态的得到元素的大小，滚动距离
3．element.scrollTop		//元素被卷去的上侧距离
4．element.scrollLeft		//元素被卷去的左侧距离

如果求页面被卷去的头部则用window.pageYOffset，左侧window.pageXOffset