一、元素偏移量offset系列
1. offset概述
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等
- 获得元素距离带有定位父元素的位置
- 获取元素自身的大小(宽度高度)
- 注意:返回的数值都不带单位
offset系列常用属性:
offset系列属性 作用 element.offsetParent 返回该元素带有定位的父级元素,如果父级都没有定位则返回body element.offsetTop 返回元素相对父元素(带定位)上方的偏移 element.offsetLeft 返回元素相对父元素(带定位)左边框的偏移 element.offsetWidth 返回自身包括padding、边框、内容区的宽度,返回的数值不带单位 element.offsetHeight 返回自身包括padding、边框、内容区的高度,返回的数值不带单位 <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .father { position: relative; margin: 100px; width: 100px; height: 100px; background-color: red; } .son { position: absolute; top: 25px; left: 20px; width: 20px; height: 20px; background-color: blue; } .size { padding: 50px; width: 500px; height: 100px; background-color: blue; border: 10px solid red; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <div class="size"></div> </body> <script> //1.可以得到元素的偏移(位置),返回不带单位的数值 let father = document.querySelector('.father'); console.log(father.offsetTop); //输出:100 console.log(father.offsetLeft); //输出:100 // 它以带有定位的父级元素为准,如果没有父级或者父级没有定位,则以body为准 let son = document.querySelector('.son'); console.log(son.offsetTop); //输出:25 console.log(son.offsetLeft); //输出:20 //2.可以得到元素的大小(宽度和高度),包含padding+border+内容区域的宽高 let size = document.querySelector('.size'); console.log(size.offsetWidth); //100(padding)+20(border)+500(width) = 620 console.log(size.offsetHeight); //100(padding)+20(border)+100(height) = 220 //3.返回带有定位的父级,如果没有父级或者父级没有定位,则返回body console.log(son.offsetParent); console.log(son.parentNode); //返回最近一级的父级元素,不管父级有没有定位 </script>
2. offset和style的区别
- offset可以得到任意样式表中的样式值;style只能得到行内样式表中的样式值
- offset系列获得的数值是没有单位的;style.width获得的是带有单位的字符串
- offsetWidth包含padding+border+width的值;style.width获得不包含padding和border的值
- offsetWidth等属性是只读属性,只能获取不能赋值;style.width是可读写属性,可以获取也可以赋值
- 当我们想要获取元素大小位置时,使用offset更合适
- 当我们想要给元素更改值时,则需要使用style
3. offset的主要作用:用于获取元素位置 offsetLeft & offsetTop
二、元素可视区client系列
1. client系列介绍:
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位 |
element.clientHeight | 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位 |
2. client的主要作用:用于获取元素大小 clientWidth & clientHeight
三、元素滚动scroll系列
1. scroll系列介绍
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回被卷去的上侧距离,返回的数值不带单位 |
element.scrollLeft | 返回被卷去的左侧距离,返回的数值不带单位 |
element.scrollWidth | 返回自身实际内容的宽度,不含边框,返回的数值不带单位 |
element.scrollHeight | 返回自身实际内容的高度,不含边框,返回的数值不带单位 |
2. scrollTop和scrollLeft :页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部,滚动条在滚动时会触发onscroll事件。
3. scroll的主要作用:用于获取滚动距离 scrollTop & scrollLeft
注意:页面的滚动距离通过 window.pageXOffset 来获取
四、动画函数封装
五、常见网页特效案例
六、立即执行函数
立即执行函数:不需要调用,立马能够自己执行的函数
写法:(function() { }) () 或者 (function() {}())
<script>
(function (a, b) {
console.log(a + b);
})(1,3); //第二个括号相当于调用函数,可以传参
(function (a, b) {
console.log(a + b)
}(2,4));
</script>
优点:独立创建了一个作用域,里面所有的变量都是局部变量,不会有命名冲突的情况