用js获取位置,距离,尺寸

一:样式值的获取

1:获取行内样式   obj.style.样式名  
2:获取非行内样式  parseInt(window.getComputedStyle(元素,null).样式属性)
3:IE 浏览器写法  元素.currentStyle[属性值]

二:获取元素尺寸

1:content+padding+border
	offsetWidth
	offsetHeight
2:content+padding
	clientWidth
	clientHeight
3:content
	parseInt(window.getComputedStyle(元素,null).样式属性)

三:滚动条滚动距离

1:非IE :document.documentElement.scrollTop
2:IE :document.body.scrollTop
3:案例:用JS代码实现固定定位效果

四:鼠标位置的获取

1:相对于事件源
	offsetX
	offsetY
2:相对于整个文档
	pageX
	pageY
3“:相对于浏览器窗口
	clientX
	clientY
ps:忽略默认css写法:pointer-events:none  可用于解决闪烁问题,使只作用于当前元素

五:获取窗口的尺寸

1:包含滚动条尺寸
	innerWidth
	innerHeight
2:不包含滚动条尺寸
	document.docunmentElement.clientWidth
	document.docunmentElement.clientHeight

六:获取元素的偏移量

offsetLeft
offsetTop
offsetParent  默认是body,定位后根据定位元素

默认相对于窗口获取偏移量,可设置定位来根据定位来获取偏移量
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值