Javascript高级技术
元素偏移量offset
offset系列属性 | 作用 |
---|---|
element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级没有定位则返回body |
element.offsetTop | 返回元素相对带有定位都元素上方的偏移 |
element.offsetLeft | 返回元素相对带有定位都元素左边框的偏移 |
element.offsetWidth | 返回自身包括padding、边框、内容区域的宽度,返回数值不带单位 |
element.offsetHeight | 返回自身包括padding、边框、内容区域的高度,返回数值不带单位 |
style和offset的区别
offset | style |
---|---|
offset可以得到任意样式表中的值 | style只能获得行内样式表的样式值 |
offset获取到的值是没有单位的 | style.width拿到的值有单位 |
offset Width包含padding+border+width | style.width活得不包含padding和border的值 |
如果获取元素的大小,用offset合适 | 修改元素的值,使用style合适 |
元素可视区域client
client系列属性 | 作用 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身包括padding、内容区域不包含边框的宽度,返回数值不带单位 |
element.clientHeight | 返回自身包括padding、内容区域不包含边框的高度,返回数值不带单位 |
立即执行函数(不需要调用,立即执行)
//第一种写法
(function(){})()
(function(){
console.log("你好i")
})()
//参数传递
(function(a,b){
console.log( a + b )
})(2,3) //输出5
//第二种写法
(function(){}())
作用:创建了一个独立的作用域,避免了命名冲突的问题
scroll系列
scroll系列属性 | 作用 |
---|---|
element.scrollTop | 返回元素卷上去的大小 |
element.scrollLeft | 返回元素卷到左边的大小 |
element.scrollWidth | 返回盒子的实际宽度 |
element.scrollHeight | 返回盒子的实际高度 |
页面被卷上去的距离获取:
window.pageYOffset
//页面滚动事件
document.addEventListener("scroll",function(){
//事件处理
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdVAvxCD-1590312120788)(C:\Users\小胡同学\AppData\Roaming\Typora\typora-user-images\image-20200524150804697.png)]
mouseover和mouseenter的区别
- | 区别 |
---|---|
mouseover | 进入自身盒子会触发,进入子盒子也会触发 |
mouseenter | 进入自身盒子会触发(禁止了冒泡) |
手动调用事件
element.click(); //在方法中手动调用点击事件
节流阀
作用:方式连续点击,连续触发事件,可以通过一个flag来标记是否可以使用
滚动到页面的某个距离:window.scroll(x,y)
—x和y不带单位
事件,可以通过一个flag来标记是否可以使用