JS特效总结

JS中的宽和高度如何获得

• DOM对象的只读宽和高属性：
  • clientWidth和clientHeight 元素的可视部分宽度和高度，即padding+content。如果没有滚动条，即为元素设定的高度和宽度；如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高
  • offsetWidth和offsetHeight 元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关
  • clientTop和clientLeft 元素的border的宽度和高度
  • offsetLeft和offsetTop 说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，即当前元素的border到包含它的offsetParent的border的距离
  • scrollHeight和scrollWidth 两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候
• DOM对象的可读可写的宽和高属性：
  • scrollTop和scrollLeft 指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。
  • obj.style.* 元素的行内样式，无法获取CSS样式表和style标签中的样式，不过DOM对象的样式会最后生效，所以可覆盖本来的样式。将样式设置为空字符串则浏览器会用原来的CSS样式。
  • obj.currentstyle（IE）和getComputedStyle 是浏览器经过计算的实际的属性，返回一个CSS对象集合，可以直接读写，操作最终样式。
• Event对象的属性
  • clientX和clientY 当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置，
  • screenX和screenY 是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值
  • offsetX和offsetY 当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标
  • pageX和pageY 事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度