您好,欢迎访问一九零五行业门户网

原生javascript兼容性测试实例_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 取得 子节点 只能是取第一层 必须是标签节点
例如:
复制代码 代码如下:
文字1
文字2
children[0] 这样只能是取到第一个span 要是想取到第一个a标签 children[0].children[0],所以说children的长度只是2;
childnodes在高版本上会算上空文本 在火狐 谷歌上 上面的是长度是5;在ie低版本(6-8)长度是4.
其它类似信息

推荐信息