JavaScript学习09-PC端网页特效

元素偏移量offset系列

属性	作用
element.offsetParent	返回该元素带有定位的父元素，没有返回body
element.offsetTop	返回该元素相对于带有定位的父元素上方的偏移
element.offsetLeft	返回该元素相对于带有定位的父元素左边框的偏移
element.offsetWidth	返回该元素包括内边距、边框、内容的宽度，不带单位
element.offsetHeight	返回该元素包括内边距 、边框、内容的高度，不带单位

offset和style的区别

offset	style
可以得到任意样式表的样式值	只能得到行内样式表中的样式值
获取的数值没有单位	style.width获得带有单位的字符串
offsetWidth包含内边距边框内容宽度	style.width获取不包含内边距边框的内容宽度
offsetWidth等属性只读，不能赋值	可读写

<style>
		div{
			width: 100px;
			height: 120px;
		}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
console.log(box.offsetHeight);  //120
console.log(box.style.width);   //空   因为只能获取行内样式
</script>

<div class="box" style="height:120px;"></div>
<script>
var box=document.querySelector('.box');
console.log(box.offsetHeight);  //120
console.log(box.style.width);   //120px
</script>

案例：获取鼠标在盒子内的坐标

<script>
	var div=document.querySelector('div');
	div.addEventListener('mousemove',function(e){
		console.log(e.pageX);  //鼠标在页面中的坐标
		console.log(e.pageY);
		console.log(this.offsetLeft);  //盒子离页面顶部和左侧的距离
		console.log(this.offsetTop);
		var x=e.pageX-this.offsetLeft;   //鼠标在盒子内的坐标
		var y=e.pageY-this.offsetTop;
	});
</script>

元素可视区client系列

属性	作用
element.clientTop	元素上边框的大小
element.clientLeft	元素左边框的大小
element.clientWidth	返回元素包括内边距、内容宽度，返回值不带单位
element.clientHeight	返回元素包括内边距、内容高度，返回值不带单位

立即执行函数

不需要调用，立马执行的函数,独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的问题。

// 写法一
( function(e){} )(e)
// 写法二
( function(e){}(e) )

元素滚动scroll系列

属性	作用
element.scrollTop	返回元素被卷去的顶部的距离，不带单位
element.scrollLeft	返回元素被卷去的左侧距离，不带单位
element.scrollWidth	返回自身实际宽度，不含边框，不带单位
element.scrollHeight	返回自身实际的高度，不含边框，不带单位

三大系列总结

offset系列常用于获取元素位置
client系列常用于获取元素大小
scroll系列常用于获取滚动距离
页面滚动距离用window.pageXoffset获取

mouseenter和mouseover

鼠标移动到元素上就会触发mouseenter。
mouseover经过自身盒子会触发，经过子盒子也会触发。
mouseenter只会由自身盒子触发，因为mouseenter不会冒泡，搭配的mouseleave也不会冒泡。