前端属性兼容性整理

1.document 相关

1.1 addEventListen

兼容写法：

function addEvt(eTarget, eType, eHandle) {
  if (eTarget.addEventListen) {
    eTarget.addEventListen(eType, eHandle)
  } else {
    // ie 浏览器
    if (eTarget.attachEvent) {
      eType = 'on' + eType
      eTarget.attachEvent(eType, eHandle)
    } else {
      eventTarget['on' + eventType] = eventHandler
    }
  }
}

1.2 scrollTop()

兼容写法：

// 因为 0 || undefine => undefined
const st =
  document.pageYOffset.scrollTop ||
  document.documentElement.scrollTop ||
  document.body.scrollTop ||
  0

// ie6/7/8
1. 没有 doctype 声明的页面：
const st = document.body.scrollTop;
2. 声明 doctype 的页面：
const st = document.documentElement.scrollTop;
// safari
const st = document.pageYOffset;
// chrome、firefox
const st = document.documentElement.scrollTop;

2.window相关

2.1 window.scrollY

兼容写法：

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = 
    ((document.compatMode 
    || "") === "CSS1Compat"); 
var x = 
  supportPageOffset ? window.pageXOffset :
  isCSS1Compat ? document.documentElement.scrollLeft :
  document.body.scrollLeft;
var y = 
  supportPageOffset ? window.pageYOffset : 
  isCSS1Compat ? document.documentElement.scrollTop : 
  document.body.scrollTop;

为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE（<9）两个属性都不支持，必须使用其他的非标准属性。

延伸：

(1) document.compatMode document.compatMode 博客园标准模式和非标准模式简书

我们可以根据 document.compatMode 的值来判断文档是否加了标准声明。

chrome截图

IE 对盒模型的渲染在 Standards Mode 和 Quirks Mode 是有很大差别的，在 Standards Mode 下对于盒模型的解释和其他的标准浏览器是一样，但在 Quirks Mode 模式下则有很大差别，而在不声明 Doctype的情况下，IE 默认又是 Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。

document.compatMode 有两种可能的返回值：

BackCompat：页面不具有 DTD，标准兼容模式关闭，对应非标准模式。

CSS1Compat：页面具有 DTD，标准兼容模式开启，对应标准模式。

(2) document.body & document.documentElement 原文链接博客园

页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

document.documentElement: 返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。

document.body：返回当前文档中的 <body> 元素或者 <frameset> 元素。

1.document 相关

2.window相关

3.CSS3相关