scroll、offset、client

scroll、offset、client

1、offset

• 获取元素距离带有定位父元素的位置
• 获得元素自身的大小
• 注意：返回的数据都不带单位

属性	说明
elem.offsetParent	返回带有定位的父元素，父元素没有定位返回body
elem.offsetTop	返回距离带有定位的父元素上方的偏移（距离顶部的位置）
elem.offsetLeft
elem.offsetWidth	返回包括margin、padding和内容的宽度
elem.offsetHeight

2、client

通过client的相关属性可以动态获取到元素边框大小、元素大小等

属性	说明
elem.clientTop	上边框的大小
elem.clientLeft	左边框的大小
elem.clientWidth	包含padding和内容，不包括边框
elem.clientHeight	同上

3、scroll

可以获取元素的大小，滚动距离等；如果向获取页面的滚动距离，应该用，window.pageXOffset

属性	说明
elem.scrollTop	被卷上去的距离（上面的看不见的那一部分）
elem.scrollLeft	被卷到左侧的距离
elem.scrollWidth	实际的宽度，不含边框
elem.scrollHeight	实际的高度，不含边框

4、总结

offsetWidth，返回带边框的内容区的宽度（不会包含内容超出边框部分）

clientWidth，返回不带边框的内容区的宽度（不会包含内容超出边框部分），常用

scrollWidth，返回不带边框内容的实际长度（包含内容超出边框部分）

内容超出：

另：立即执行函数

// 普通函数
function sout(a,b){
	console.log(a+'---'+b);
}
sout(4,2);	// 需要调用

// 立即执行函数（方法名写不写都可以），这种方法不通过调用也能执行：
// 写法一
(function sout (a,b){
	console.log(a + '---' + b);
})(5,2)
// 写法二
(function sout (a,b) {
   console.log(a + '---' + b); 
}(5,2))

注：在一个立即执行函数中作用域独立。如写法一与写法二同时出现在一个文件中也不会冲突