DOM常用属性

快捷尺寸

DOM常用的相关属性

• clientWidth、clientHeight
  该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding、高度+padding
• offsetWidth、offsetHeight
  该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding+border、高度+padding+border
• clientLeft、 clientTop
  该属性是每一个元素都有的属性，读取到的是左、上边框的宽度
• scrollTop
  获取页面的卷动值页面中位于视口上方的页面的高度
• window.innerWidth window.innerHeight
  获取窗口的尺寸宽度、高度
• document.documentElement.clientWidth
• document.documentElement.clientHeight
  获取视口的尺寸宽度、高度 有滚动条时不包含滚动条宽度默认17px

快捷位置

offsetParent
每一个元素都有一个属性 它指向定位父元素 该元素长辈中第一个具有定位的元素 都没指向的是body
获取到定位父元素的距离
offsetLeft 用于获取距离 左边距离
offsetTop 用于获取距离 顶部距离
都是从自己的边框外 到定位父元素的边框内(IE8除外 IE8是到父元素的边框外)

event 事件对象

事件对象
当浏览器中的事件被触发时，会产生许许多多的信息。有时我们会需要使用到这些信息。
获取方式，就是通过事件对象。
事件对象是：浏览器在触发事件时，帮助我们收集的许多信息的集合对象。
事件对象的位置 有兼容性问题

• 高级浏览器
  • 事件函数的形参
• IE浏览器
  • window.event
    event 表示事件对象
    事件绑定给谁谁触发
    altKey 表示事件触发时 键盘的alt键是否按下 false表示没有按下 true表示按下
    shiftKey 表示事件触发时 键盘的shift键是否按下 false表示没有按下 true表示按下
    ctrlKey 表示事件触发时 键盘的ctrl键是否按下 false表示没有按下 true表示按下
    clientX 表示事件触发时 鼠标位置到视口左边的距离
    clientY 表示事件触发时 鼠标位置到视口上边的距离
    offsetX 表示事件触发时 鼠标位置到元素左边的距离
    offsetY 表示事件触发时 鼠标位置到元素上边的距离
    注: offsetX offsetY 会被子元素影响 在最下面一层子元素使用
    绑定父元素 点击子元素会变为到子元素左边和上边的距离
    pageX 表示事件触发时 鼠标到页面左边的距离
    pageY 表示事件触发时 鼠标到页面上边的距离
    注：pageX pageY有兼容性问题 IE没有 可以使用clientX + scrollTop clientY + scrollLeft
    scrollLeft 页面较大时在视口左边的看不到的距离
    scrollTop 页面较大时在视口上边的看不到的距离
    IE的event事件在window上 window.event
    target 在高级浏览器中表示触发事件的元素 有兼容性问题
    srcElement 在IE浏览器中表示触发事件的元素 有兼容性问题