边界相关设置

140 阅读1分钟

点击事件的光标定位

  • 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
注意是只读属性,不能通过这个设置属性 如果元素没有定位.获取的是相对于页面的左上角的定位
如果元素有定位,获取的是相对于父元素左上角的定位