javascript跨浏览器的属性判断方法

2019-12-23,,,

今天在写代码的时候发现一个很容易出错的地方。当我们在声明变量时,常常会因为不同的 browser 有不同的 API 定义,然后用以下的写法来判断哪一个属性,例如:
复制代码 代码如下:var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElement;
用||来检查要用哪一个 attribute。
不过要小心 javascript 的值当成条件时的判断。
例如:
复制代码 代码如下:var sLeft = window.screenLeft || window.screenX; //firefox use screenX
console.log(sLeft);
这段代码希望 screenLeft 会回传 window.screenLeft ,而在 firefox 会回传 window.screenX。
但是如果 screenLeft 刚好等於 0 的时候,就会进入||之后的条件了,接著就 gg 了。


因此建议在值的判断还是正统一点用 hasOwnProperty 或 typeof 来判断会比较精準。
复制代码 代码如下:var sLeft = window.screenLeft;
if( !window.hasOwnProperty('screenLeft')) sLeft = window.screenX;

您可能感兴趣的文章:

  • JavaScript实现跨浏览器的添加及删除事件绑定函数实例
  • JavaScript跨浏览器获取页面中相同class节点的方法
  • myEvent.js javascript跨浏览器事件框架
  • 跨浏览器通用、可重用的选项卡tab切换js代码
  • JavaScript判断窗口是否最小化的代码(跨浏览器)
  • 基于JS快速实现导航下拉菜单动画效果附源码下载
  • js实现加载更多功能实例
  • js 实现一些跨浏览器的事件方法详解及实例

《javascript跨浏览器的属性判断方法.doc》

下载本文的Word格式文档,以方便收藏与打印。