原生javascript兼容性测试实例
2023-06-13 09:15:02 时间
1.获取样式表里面的width,bordercolor之类的css(不是行间)主要是IE6-7支持currentStyle,标准浏览器支持getComputedStyle;
实例:封装函数
复制代码代码如下:
实例:封装函数
functiongetStyle(obj,name){
if(obj.currentStyle){
returnobj.currentStyle[name];
}
else{
returngetComputedStyle(obj,false)[name];
}
}
调用:getStyle("color");
2.获取滚动的距离
document.body.scrollTop适用于标准浏览器
document.documentElement.scrollTop适用于IE9以下版本
兼容性可以这样写
vartop=document.body.scrollTop|document.documentElement.scrollTop;
3.事件对象
标准浏览器:事件对象作为事件函数的参数
IE低版本需要直接用event对象(全局)
function(ev){
varevent=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);});
事件绑定的封装函数:
functionaddEvent(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){
varev=ev||window.event;
vartarget=ev.target||ev.srcElement;//获得事件源主要处理IE低版本this为window之bug
alert(target)
});
绑定之取消事件fn为函数名字
functionremoveEvent(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)
{
varoAjax=newXMLHttpRequest();//标准浏览器
}
else
{
varoAjax=newActiveXObject("Microsoft.XMLHTTP");//IE低版本
}
alert(oAjax);
6.取消默认事件
js中默认事件取消是主要是两种returnfalse和preventDefault
取消默认事件中returnfalse是兼容任何浏览器但是如果遇到事件绑定的addEventListener会取消不掉默认事件
取消默认右键事件例子:
document.addEventListener("contextmenu",function(ev){
ev.preventDefault();
}))
document.oncontextmenu=function(){
returnfalse;
}
7.call与apply的区别
call、apply可以调用函数
例如
functionshow(){
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><ahref="#">文字1</a></span>
<span><ahref="#">文字2</a></span>
children[0]这样只能是取到第一个span要是想取到第一个a标签children[0].children[0],所以说children的长度只是2;
childNodes在高版本上会算上空文本在火狐谷歌上上面的是长度是5;在IE低版本(6-8)长度是4.
相关文章
- JavaScript高级程序设计(读书笔记)(七)[通俗易懂]
- JavaScript 获取URL请求参数详解编程语言
- Jsprime——一款JavaScript静态安全分析工具
- javascript复选框选择/全选后特效
- Javascript多种浏览器兼容写法分析
- javascript中的prototype属性实例分析说明
- Javascript拓展String方法小结
- JavaScript根据数据生成百分比图和柱状图的实例代码
- javascript完美拖拽的实现方法
- JavaScript获取多个数组的交集简单实例
- javascript间隔刷新的简单实例
- 优化javascript的执行效率一些方法总结
- javascript将相对路径转绝对路径示例
- JavaScript中的typeof操作符用法实例
- 关于Javascript对象(object)的prototype
- javascript判断是手机还是电脑访问网页的简单实例分享
- javascript实例分享---具有立体效果的图片特效
- javascript解析json实例详解
- JavaScript实现twitterpuddles算法实例
- Javascript多物体运动的实现
- JavaScript修改浏览器tab标题小技巧
- javascript面向对象快速入门实例
- JavaScript学习笔记之Function对象