小小千想和您聊一聊

当前位置: 首页> 技术分享> javascript中的常见的兼容写法

javascript中的常见的兼容写法

  1. 获取后一个兄弟节点的兼容写法

var nextElement=oLi3.nextElementSibling||oLi3.nextSibling;

  2. 获取前一个兄弟节点兼容写法

var previousElement = oLi3.previousElementSibling || oLi3.previousSibling;

  3. childNodes的兼容使用

function getChildNodes(ele) {

  //1.定义一个空的数组

  var arr = [];

  //2.获取指定元素

  var oEle = document.querySelector(ele);

  //3.将元素下边的所有儿子拿到

  for (var i = 0; i < oEle.childNodes.length; i++) {

  //4.变量判断真的儿子(元素节点nodeType==1)

  if (oEle.childNodes[i].nodeType == 1) {

  //5.将真儿子添加到数组里

  arr.push(oEle.childNodes[i])

  }

  }

  //6.返回数组

  return arr;

  }

  4.拿到第一个儿子

var No1 = oBox.firstElementChild || oBox.firstChild;

  5.拿到最后 个儿子

var oLast = oBox.lastElementChild || oBox.lastChild;

  6.事件目标对象兼容

var t = event.target || event.srcElement;

  滚动条的兼容写法

  一 简单兼容写法 

document.documentElement.scrollTop||document.body.scrollTop

  二 高级兼容写法 

function myScroll() {

  // ie9以上, google,火狐都能用

  if (window.pageXOffset != undefined) {

  return {

  "left": window.pageXOffset,

  "top": window.pageYOffset

  }

  } else if (document.compatMode == "CSS1Compat") {

  // 标准 DTD (有声明头)

  return {

  "left": document.documentElement.scrollLeft,

  "top": document.documentElement.scrollTop

  }

  }

  // 非标准 没有 DTD (没有声明头)

  return {

  "left": document.body.scrollLeft,

  "top": document.body.scrollTop

  }

  }

  html5的新标签在 ie 6 7 8 下有兼容问题,解决原理是 动态创建标签 document.createElement,我可以是快速使用html5shiv插件

  事件对象的兼容写法

var e=evt||window.event;

  键盘事件

var keyCode = e.keyCode || e.which;

  获取样式的兼容写法 

function getStyle(obj, attr) {

  // 非ie,google,火狐

  if (window.getComputedStyle) {

  return window.getComputedStyle(obj, null)[attr];

  }

  //ie 6 8 9

  return obj.currentStyle[attr];

  }

  阻止冒泡的兼容

 if (e.stopPropagation) {

  e.stopPropagation();

  } else {

  e.cancelBubble = true;

  }

  阻止默认行为

 if (e.preventDefault) {

  e.preventDefault()

  } else {

  e.returnValue = false;

  }

  事件监听的兼容写法

oBtn.addEventListener("click", function () {

  alert("长沙千锋老罗最帅");

  }, {

  once: true, // 只能被点一次

  useCapture: true // true||false

  })

  //obj 给指定的元素添加事件

  //type 事件的类型(click,mouseenter..)

  //fn 函数名称

  //useCapTure 捕获还是冒泡

  function addEvent(obj, type, fn, useCapTure) {

  if (obj.addEventListener) {

  obj.addEventListener(type, fn, useCapTure)

  } else {

  obj.attachEvent("on" + type, fn)

  }

  }

  事件监听移除兼容写法

 function removeEvent(obj, type, fn, useCapTure) {

  if (obj.removeEventListener) {

  obj.removeEventListener(type, fn, useCapTure);

  } else {

  obj.detachEvent("on" + type, fn);

  }

  }

上一篇:Docker基本使用与命令

下一篇:使用soapUI进行性能测试

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码
0.5913s