学习笔记:mouseenter 与 mouseover,offset

mouseenter 与 mouseover

当鼠标移动到元素上时就会触发mouseenter 事件

mouseover :鼠标经过自身盒子回触发,经过子盒子还会触发

mouseenter:只会经过自身盒子触发,因为mouseenter不会冒泡。跟mouseenter搭配 鼠标离开mouseleave 同样不会冒泡

offset 系列经常用于获得元素位置:offsetLeft offsetTop  【offset  包含padding+border+width】

client经常用于获取元素大小:clientWidth clientHeight  【client 不含border】【当内容超出盒子大小时,client不含超出部分的宽高】

scroll 经常用于获取滚动距离:scrollTop scrollLeft  【scroll 不含border】【当内容超出盒子大小时,scroll 含超出部分的宽高,即自身内容的宽高】

页面滚动的距离通过window.pageXOffset获得

offset 与 style 区别

offset

offset可得到任意样式表中的样式值

offset获得的数值没有单位

offsetWidth包含padding+border+width

offsetWidth等属性是只读属性,只能获取不能赋值

获取元素大小位置,用offset合适

style

style只能得到行内样式表中的样式值

style.width获得的数值 有单位

style.width 不包含 padding和 border的值

style.width 可读写属性,可获取 可赋值

修改元素值,用style合适

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值