获取计算后的dom样式

ie

currentStyle

非ie

getComputedStyle

使用时要先判断浏览器

var style;
try{
style=getComputedStyle(div0);
}catch(error){
style=div0.currentStyle;
}
• 先尝试第一个，不行就尝试第二个。
• 之前效率很低，尽量不用，现在浏览器优化了，可以放心使用

拓展：

Object.assign() 复制对象，浅复制

增添class样式

• 如果DOM的行内样式有内容，可以通过这个方式获取对应的行内样式。
• 但如果DOM样式在CSS中，这时候还没有渲染，所以无法计算CSS的样式，这种style是无法获得的
• 想要获取计算后样式，就需要使用getComputedStyle获取元素的样式

Dom对象常见属性

• 宽高

  DOM的宽高问题

  clientWidth clientHeight 客户宽高

  计算后宽高=宽高+padding-(如果有滚动条，减去滚动条宽高)

offsetWidth offsetHeight 偏移宽高

计算后宽高=宽高+padding+border

scrollWidth scrollHeight 滚动内容宽高

如果没有超出 等同于clientWidth和clientHeight
• 如果超出就是实际内容所占的宽高，但是padding没有右侧和下侧
• 如果超出就是实际内容所占的宽高，但是padding没有右侧和下侧-(如果有滚动条，减去滚动条宽高)

html和body宽高问题

document.body body标签

clientWidth clientHeight 客户宽高

实际body的宽度和高度-滚动条宽高

offsetWidth offsetHeight 偏移宽高

实际body的宽度和高度-滚动条宽高

scrollWidth scrollHeight 滚动内容宽高

实际body中内容的宽高

document.documentElement html标签

clientWidth clientHeight 客户宽高

当前文档的可视宽高-(如果有滚动条，减去滚动条宽高)

offsetWidth offsetHeight 偏移宽高

当前文档的内容宽高-(如果有滚动条，减去滚动条宽高)

scrollWidth scrollHeight 滚动内容宽高

当前文档的可视宽高
• 如果有滚动条，就是实际body撑开的宽高

位置

DOM的位置问题

clientLeft clientTop 客户位置

边线的宽高

offsetLeft offsetTop 偏移位置

当前div到父容器左上角的距离（父容器是定位）
• 和position的left和top是相同的

scrollLeft scrollTop 滚动条位置

当前元素的滚动条位置
• 前面的这些属性都是只读，但是这个是可以修改的
• div2.scrollLeft=100; 滚动条位置设置

getBoundingClientRect() 当前元素到可视窗口左上角的位置

console.log(rect);

rect.x===rect.left;

• rect.y===rect.top;

html和body位置问题

html和body的clientLeft ,offsetLeft 不考虑

• scrollTop、scrollLeft

  页面中的滚动是html的scrollTop和scrollLeft控制

• 早期的浏览器是body控制

• 考虑兼容一起写，设置同样的值

  如：
  document.body.scrollTop=100;
  document.documentElement.scrollTop=100;

事件对象

事件基础

• 事件

  是通知和侦听组合完成的

• 先侦听后通知，执行对应的函数
• 部分事件是系统默认事件，这些事件会由系统自动抛发

创建一个事件对象

事件类型必须是一个字符串
• 事件的类型必须相同
• 事件侦听的对象和抛发的对象必须相同
• 将事件抛向侦听对象就可以
• 先侦听后抛发

事件原理

• 捕获阶段

  从外到里

目标阶段

事件锁定对象的最后的目标元素

冒泡阶段

从里到外

事件侦听和删除侦听

• ie9以上

  添加事件：element.addEventListener(1，2，3)

  1事件类型

• 2事件回调函数

• 3布尔值（是否是捕获阶段，默认是false）

  布尔值true 捕获，false冒泡

移除事件：element.removeEventListener(‘事件名’,事件函数名,事件冒泡/捕获)

ie8及以下

添加事件：element.attachEvent(‘on开头的事件名’,事件函数名)
• 移除事件：element.detachEvent(‘on开头的事件名’,事件函数名)

注：

事件对象必须是EventTarget或者继承他所产生子类
• 目前只有dom可以做侦听

取消冒泡事件

• 标准浏览器下 DOM中 :

  event.stopPropagation() 停止传播

IE8及以下：

event.cancelBubble=true 取消冒泡

this

• 事件中的this

  侦听的对象，而不是点击的目标对象

• 等同于 currentTarget 侦听的对象

target、srcElement、toElement 实际点击的目标对象

目标的定位 不管有没有停止冒泡，都有目标
• 阻止冒泡只是阻止了继续传播

事件委托

• 将子元素的事件，委托给父元素。这样就可以减少侦听的数量

XMind: ZEN – Trial Version