点击事件的光标定位
- e.offsetX和e.offsetY 相对于事件元素左上角的定位(注意会被事件元素的子元素影响:当点击到事件源的子级元素时,会相对子级元素定位)
- e.clientX和e.clientY 相对于浏览器可视窗口的左上角定位
- e.pageX和e.pageY 相对于页面的左上角定位
获取元素的宽高
1.获取元素(事件源)的尺寸
div.offsetWidth(宽) 和 div.offsetHeigth(高)
只能获取到页面中已经渲染的元素,注意js中创建的标签,如果还没有加载到页面上,
获取不到它的实际长度,会使获取到的长度为0
包括:内容+padding+border
2.在DOM中获取元素的宽高
div.clientWidth 和 div.clientHeight
包括:内容+padding(不包括边框)(不包括浏览器滚动条)
document.documentElement.clientWidth//通过clientWidth获取浏览器窗口的宽度,不包括浏览器滚动条
//当body:height:100%;width:100%;即当body和浏览器大小一样的时候,可以通过body获取浏览器窗口的大小
document.body.clientWidth
3.在BOM中获取浏览器宽口大小
包括滚动条 window.innerWidth window.innerHeight
获取元素的偏移量
offsetLeft offsetTop
注意是只读属性,不能通过这个设置属性
如果元素没有定位.获取的是相对于页面的左上角的定位
如果元素有定位,获取的是相对于父元素左上角的定位