javascript中各种宽高以及event对象的总结

参考文章:https://segmentfault.com/a/1190000002545307

1、对原生的元素属性的理解

     clientWidth = padding*2 + width
     clientHeight = padding*2 + height
     clientLeft = border
     clientTop = border

     offsetParent 指的是当前元素离自己最近的具有定位的父级元素
     offsetWidth = (padding+border)*2 + width
     offsetHeight = (padding+border)*2 + height
     offsetLeft = 距离offsetParent左边距离
     offsetTop = 距离offsetParent上边距离

     scrollTop          获取元素中的内容 超出 元素上边界的那部分高度
     scrollLeft          获取元素中的内容 超出 元素左边界的那部分宽度
     scrollHeight      获取元素的完整高度(不包括border)
     scrollWidth       获取元素的完整宽度(不包括border)

除了scrollTop和scrollLeft可读可写,其余的只读
以上返回的值均不带单位

2、obj.style.* 属性
它只能获取该元素的行内样式,而并不能获取到该元素最终计算好的样式
使用obj.currentStyle(IE)和getComputerStyle(IE之外的其他浏览器)
返回的值为带单位的字符串

function getStyle(obj, attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }else{
    return getComputedStyle(obj,false)[attr];
  }
}

3、Event对象
在js中,对于元素的运动操作通常都会涉及到event对象,而event对象也存在很多位置属性,且由于浏览器兼容性问题会导致这些属性间相互混淆!

  • clientX和clientY,这对属性是当事件后,鼠标点击位置相对于浏览器(可视区)的坐标,从浏览器的左上角(0,0)开始计算鼠标点击位置距离其左上角的位置。

  • screenX和screenY是事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为改点的screenX和screenY值。相对于屏幕,而又是浏览器。

  • offsetX和offsetY,这对属性是当事件时,鼠标点击位置相对于该事件源(不包含border)的位置,即点击该div,以该div为原点来计算鼠标点击位置的坐标(注:firefox不支持该属性,firefox中与此属性对应的概念是,event.layerX和event.layerY,所以要使用该属性时,需要做兼容性处理)

var divX = event.offsetX || event.layerX;
  • pageX和pageY,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口还没有出现滚动条时,该属性和clientX和clientY是等价的,但是当浏览器出现滚动条时,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度。即pageX和pageY是相对于整个页面的位置

你可能感兴趣的:(javascript中各种宽高以及event对象的总结)