原生JS方法个人总结(兼容性写法)

获取非行内样式的兼容 ✿ :

注释
1.style:获取行间样式。
2. currentStyle:获取计算后的样式,也叫当前样式、最终样式。
3. getComputedStyle(obj,false):在FF新版本中只需要第一个参数,即操作对象,第二个参数写“false”也是大家通用的写法,目的是为了兼容老版本的火狐浏览器。

//获取非行内样式的兼容
function getStyle(ele,attr){
    if(ele.currentStyle){
           return ele.currentStyle[attr];
    }else{
           return getComputedStyle(ele,false)[attr];
          }
    }             
         

获取行内样式的兼容 ✿ :

//获取行内样式的兼容
window.onload = function(){
     var oDiv = document.getElementById('div1');
     if(oDiv.currentStyle){
         //IE
          alert(oDiv.currentStyle.width);
     }else{
         //FF
          alert(getComputedStyle(oDiv,false).width);
          }
    };             
         

阻止浏览器默认事件的兼容 ✿ :

//阻止浏览器默认事件的兼容 
preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

阻止事件冒泡的兼容 ✿ :

//阻止事件冒泡的兼容 
stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

获取事件及事件对象目标 ✿ :

//获取事件及事件对象目标   
 getEvent: function(event){
     return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
     return event.target || event.srcElement;
 }

IE和标准下有哪些兼容性 ✿ :

//IE和标准下有哪些兼容性   
Var ev = ev || window.event  //事件问题
//网页可见区域
document.documentElement.clientWidth || document.body.clientWidth 
//事件源兼容
Var target = ev.srcElement||ev.target

在这里插入图片描述

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
原生的 AJAX 在不同的浏览器下会有不同的写法。以下是一种常见的兼容各种浏览器的写法: ``` function createXHR() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { if (typeof arguments.callee.activeXString != "string") { var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ]; for (var i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex) { // 跳过 } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available."); } } function ajax(options) { var xhr = createXHR(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { options.success(xhr.responseText); } else { options.error(xhr.status); } } }; var url = options.url; var method = options.method || "GET"; var async = options.async || true; var data = options.data || null; xhr.open(method, url, async); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); } ``` 这段代码中,`createXHR()` 函数用于创建 XMLHttpRequest 对象,如果浏览器支持 XMLHttpRequest,则创建 XMLHttpRequest 对象并返回;否则,尝试使用 ActiveXObject 创建 XMLHttpRequest 对象。在 `ajax()` 函数中,首先调用 `createXHR()` 函数创建 XMLHttpRequest 对象,然后设置 `xhr.onreadystatechange` 函数,当 readyState 变为 4 时,判断状态码是否在 200 到 299 之间或者是否为 304,如果是则调用 `options.success()` 函数,否则调用 `options.error()` 函数。接着设置请求的 URL、请求方法、是否异步、请求数据类型等信息,最后发送请求。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值