<span>...">
最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > 01-20210116、浏览器的兼容解决方案

    01-20210116、浏览器的兼容解决方案

    正文概述 掘金(茶都醉何况酒)   2021-01-16   417

    1、IE 与常规浏览器兼容总结

    1.1、变量声明

    1.1.1、let

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        let box = document.getElementById('box');  // ==> IE11 以下报错： SCRIPT11011: 缺少 ';'，IE 12 以上正确获取
    </script>
</body>

    1.1.2、const

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        let box = document.getElementById('box');  // ==> IE11 以下报错： SCRIPT1109: 语法错误，IE 12 以上正确获取
    </script>
</body>

    1.2、元素获取

    1.2.1、document.querySelector

       //==> IE8
   <div class="box"></div>
    <script>
        // IE 8 以下不支持  报错==>对象不支持“querySelector”属性或方法
       var box = document.querySelector('.box');
       console.log(box);
    </script>

	//==> IE9 [object Object] 返回查找元素对象信息

    1.2.2、document.querySelectorAll

    <body> 
    <div class="box"></div>
    <script>
        // IE 8 以下不支持  报错==>SCRIPT11109: 对象不支持“querySelectorAll”属性或方法
        // IE 9 [object Object]
       var box = document.querySelectorAll('.box');
       console.log(box);
    </script>
</body>

    1.2.3、document.getElementsByClassName

    <body>
    <div class="box"></div>
    <script>
        // IE 9 以下不支持  报错==>SCRIPT11109: 对象不支持“getElementsByClassName”属性或方法
        // IE 10 HtmlCollection
       var box = document.getElementsByClassName('box');
       console.log(box);
    </script>
</body>

    1.3、节点获取

    1.3.1、element.firstElementChild

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
       var box = document.getElementById('box');
       console.log(box.firstChild); // IE 9 以下不支持  输出==> undefined
       console.log(box.firstElementChild);// IE 10 HtmlCollection
    </script>
</body>

    兼容写法：

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        var box = document.getElementById('box');
        var res = box.firstElementChild ? box.firstElementChild : box.firstChild
        console.log(res); //==> [object Object] 元素对象
    </script>
</body>

    1.3.2、element.lastElementChild

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
       var box = document.getElementById 
       console.log(box.lastElementChild);// IE 9 以下不支持  输出==> undefinedd('box');
       console.log(box.lastChild);// IE 10 HtmlCollection
    </script>
</body>

    兼容写法：

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        var box = document.getElementById('box');
        var res = box.lastElementChild ? box.lastElementChild : box.lastChild
        console.log(res); //==> [object Object] 元素对象
    </script>
</body>

    1.3.3、element.priviousElementSibling

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        var box = document.getElementById('color'); 
        console.log(box.previousElementSibling); //==> undefined
        console.log(box.previousSibling); //==> [object Object]
    </script>
</body>

    兼容写法：

    	var element = box.previousElementSibling || box.previousSibling

    1.3.4、element.nextElementSibling

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        var box = document.getElementById('color'); 
        console.log(box.nextElementSibling); //==> undefined
        console.log(box.nextSibling); //==> [object Object]
    </script>
</body>

    兼容写法：

    	var element = box.nextElementSibling || box.nextSibling

    1.3.5、return的方式返回

    function nextElementSibling(element){
   return element.nextElementSibling ||element.nextSibling
}

    1.4、样式获取

    1.4.1、window.getComputedStyle

    常规浏览器： window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类) ， 一般我们不用伪类,时写null

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-9">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector('.box')
        let style = window.getComputedStyle(box,null)
        console.log(style);  //==> CSSStyleDeclaration
    </script>
</body>
</html>

    IE 浏览器: element.currentStyle

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-9">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector('.box')
        let style = box.currentStyle
        console.log(style); //==> [object MSCurrentStyleCSSPropertiesPrototype]
    </script>
</body>
</html>

    兼容写法：

    /**
 * 
 * @param {*} element 获取类样式的元素
 * @param {String} attr 获取的类样式[可传可不传，不传则返回当前元素所有的类样式]
 */
function getStyle(element, attr) {
    if (attr) {
        return window.getComputedStyle ? window.getComputedStyle(element)[attr] : element.currentStyle[attr]
    }else {
        return window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle
    }
}

    1.5、事件

    1.5.1、二级事件绑定和解绑

    1.5.1.1、事件绑定

    兼容写法为：

    /**
 * 
 * @param {*} element 需要绑定事件的元素
 * @param {*} type 事件类型
 * @param {*} callbak 绑定的回调函数
 */
function getAddEventListener(element, type, callbak) {
    return element.getAddEventListener ? element.getAddEventListener(type,callbak):element.attachEvent('on'+type,callbak)
}

    1.5.1.2、事件解绑

    兼容写法：

    /**
 * 
 * @param {*} element 需要进行事件解绑的元素
 * @param {*} callbakname 进行解绑的事件名
 */
function getRemoveEventListener(element, callbakname) {
    return element.removeEventListener ? element.removeEventListener(callbakname):element.detachEvent(callbakname)
}

    1.5.2、事件对象 e

    兼容写法：

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        document.querySelector('button').addEventListener('click',function(e){
            let event = e || window.event  //==> 可以使用此种方式获取事件对象
        })
    </script>
</body>

    1.5.3、target

    <body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        document.querySelector('button').addEventListener('click',function(e){
            let event = e || window.event
            // 获取target
            let target = e.target || e.srcElement
        })
    </script>
</body>

    1.5.4、冒泡

    兼容写法：

    document.querySelector('button').addEventListener('click',function(e){
  	e.stopProprogation ? e.stopProprogation() : e.cancleBubble = true         
})

    1.5.5、键盘事件中的keyCode

    1.5.5.1 keyDown

    document.addEventListener('keydown',function(e){
  	let event = e || window.event
    //==> 获取键盘按下的信息
    let key = event.which || event.keyCode
})

    1.5.6、鼠标事件中的button与buttons

    1.5.7、阻止标签自带的默认事件


    起源地下载网 » 01-20210116、浏览器的兼容解决方案

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(茶都醉何况酒)

    掘金(茶都醉何况酒) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元