Javascript高级技术
offset系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素 如果父级没有定位则返回body
element.offsetTop 返回元素相对带有定位都元素上方的偏移
element.offsetLeft 返回元素相对带有定位都元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区域的宽度,返回数值不带单位
element.offsetHeight 返回自身包括padding、边框、内容区域的高度,返回数值不带单位
style和offset的区别
offset tyle
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(){
//事件处理
})
mouseover和mouseenter的区别
- 区别 mouseover 进入自身盒子会触发,进入子盒子也会触发 mouseenter 进入自身盒子会触发(禁止了冒泡)
手动调用事件
element.click(); //在方法中手动调用点击事件
节流阀
作用:方式连续点击,连续触发事件,可以通过一个flag来标记是否可以使用
滚动到页面的某个距离:
window.scroll(x,y)
—x和y不带单位事件,可以通过一个flag来标记是否可以使用