原生javascript兼容性测试实例

1.获取样式表里面的width,border color 之类的css(不是行间) 主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle;

实例:封装函数


代码如下:

function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}

调用:getStyle('color');

2.获取滚动的距离
document.body.scrollTop 适用于 标准浏览器
document.documentElement.scrollTop 适用于IE9以下版本
兼容性可以这样写
var top = document.body.scrollTop | document.documentElement.scrollTop;

3.事件对象
标准浏览器:事件对象作为事件函数的参数
IE低版本 需要直接用event对象(全局)


代码如下:

function (ev){
var event = ev || event;
}

现在event就作为了事件对象

4.绑定事件 IE 的绑定事件为 attachEvent/detachEvent(绑定或取消);标准浏览器 addEventListener/removeEventListener(绑定或取消)
以下是事件绑定或取消的参数,在事件绑定中 函数不能是匿名函数 否则取消不掉
addEventListener的使用方式:

target.addEventListener(type, listener, useCapture);

target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中:

target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

事件绑定的封装函数:


代码如下:

function addEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn)
}
else{
obj.addEventListener(ev, fn, false);

}
}

这样的封装函数如果绑定事件fn函数里面用到this 需提防 this 为window(只有IE低版本有这个bug) 不是obj;


代码如下:

addEvent(document,'click',function(ev){

var ev=ev||window.event;
var target = ev.target||ev.srcElement; // 获得事件源 主要处理IE低版本this为window之bug
alert(target)
});

绑定之取消事件 fn为函数名字


代码如下:

function removeEvent(obj,ev,fn){
if(obj.detachEvent){
obj.detachEvent('on'+ev,fn)
}
else{
obj.removeEventListener(ev, fn, false);

}
}

5.ajax
Ajax创建XMLHttp对象 标准版浏览器与IE低版本不兼容
标准版创建XMLHttp对象:


代码如下:

//1.创建对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();//标准浏览器
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE低版本
}
alert(oAjax);

6.取消默认事件
js中默认事件取消是主要是两种 return false 和 preventDefault
取消默认事件中return false 是兼容任何浏览器 但是如果遇到事件绑定的 addEventListener 会取消不掉默认事件
取消默认右键事件例子:


代码如下:

document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
}))
document.oncontextmenu = function(){
return false;
}

7.call与apply 的区别
call、apply 可以调用函数
例如


代码如下:

function show(){
alert(this)
}
//show(); 弹出window
//show.call();弹出windwo
//show.call(this) //弹出window
//show.call(5); //弹出5;
show.call(this,5); //弹出window

call(this,arg1,arg2,...)可以看出call里面的参数 this主要是指代事件对象 以后参数是函数中用到的参数
用call与apply来主要是修改this的,功能上和普通的函数没有什么太大的区别
apply(this,arguments) 主要是对参数不确定来使用
8、DOM取得子节点children和childNodes
children 取得 子节点 只能是取第一层 必须是标签节点
例如:


代码如下:

<span><a href="#">文字1</a></span>
<span><a href="#">文字2</a></span>

children[0] 这样只能是取到第一个span 要是想取到第一个a标签 children[0].children[0],所以说children的长度只是2;
childNodes在高版本上会算上空文本 在火狐 谷歌上 上面的是长度是5;在IE低版本(6-8)长度是4.

(0)

相关推荐

  • Js event事件在IE、FF兼容性问题

    1.window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象. 如: 复制代码 代码如下: <input type="button" onmousemove="showDiv(event);"//event不需要加引号 function showDiv(event) { var event=window.event||event; event.clientX; event.c

  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • Javascript在IE和Firefox浏览器常见兼容性问题总结

    本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题.分享给大家供大家参考,具体如下: 表单 document.formName.item("itemName") IE:可以使用document.formName.item("itemName")或document.formName.elements["elementName"] Firefox:只能使用document.formName.elements["el

  • javascript中日期函数new Date()的浏览器兼容性问题

    同一种语言javascript,在不同的浏览器中,存在语言兼容性问题,本质上是由于不同的浏览器是支持的语言标准和实现上各有差异.本文将基于new Date来创建Date对象来分析这个问题. 1.  问题的提出, 开始时间和结束时间空间无法正确的传递值 在页面中,我们使用了一个时间上的组件来开发时间选择框,但是发现在Firefox下是无法正常工作的,在Chrome下是可以正常运行的. 问题出在哪里呢? 2.  问题分析 结果分析发现是由于如下代码产生的问题: var timestart = '20

  • css与javascript跨浏览器兼容性总结

    本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

  • JavaScript在IE和FF下的兼容性问题

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 复制代码 代码如下: 一.函数和方法差异:二.样式访问和设置:三.DOM方法及对象引用:四.事件处理:五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码 代码如下: var year= new Date().get

  • Javascript selection的兼容性写法介绍

    复制代码 代码如下: function getSelectedText() { //this function code is borrowed from: http://www.codetoad.com/javascript_get_selected_text.asp var txt = ""; if (window.getSelection) { txt = window.getSelection(); } else if (window.document.getSelection

  • JS IE和FF兼容性问题汇总

    1. document.form.item 问题 现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 解决方法: 改用 document.formName.elements["elementName"] 其它 参见 2 2. 集合类对象问题 现有问题: 现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能. 解决方法: 改用 [] 作为下标运算.如:document.f

  • js日期对象兼容性的处理方法

    复制代码 代码如下: function NewDate(str) { str = str.split('-'); var date = new Date(); date.setUTCFullYear(str[0], str[1] - 1, str[2]); date.setUTCHours(0, 0, 0, 0); return date; } 所以,为保证在各个浏览器中兼容,其实就是指为了兼容IE,我们在使用Date()对象时最好统一使用 new Date(year, month, day,

  • JavaScript的setAttribute兼容性问题解决方法

    复制代码 代码如下: var asubmit = document.getElementById("submit"); 复制代码 代码如下: <span style="white-space:pre"> </span>asubmit.setAttribute("onclick","alert('请检查手机号码');"); //在火狐中有效,而在ie中无效 复制代码 代码如下: <span styl

  • JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

    本文实例讲述了JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果.分享给大家供大家参考.具体如下: 这是一款兼容性好,自动置顶的淘宝悬浮工具栏,如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡,其实明白了这种思路,你就能举一返三了,演示一下看看效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tb-float-top-tools-menu-codes/ 具体代码如下: <!DOCTYPE html PU

  • Javascript 多浏览器兼容性问题及解决方案

    CSS 多浏览器兼容性问题及解决方案一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统

  • 常用原生JS兼容性写法汇总

    就来总结一下简单的东西 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 ele

随机推荐