JS中的兼容写法

判断用户输入事件

  • 正常浏览器:oninput
  • ie678 支持:onpropertychange
$("txt").oninput = $("txt").onpropertychange = function(){
                if(this.value == ""){
                    $("message").style.display = 'block';
                }else{
                    $("message").style.display = 'none';
                }
            }

封装自己class类,根据类名找对象 同getElementByClassnme

function getClass(classname){
            //如果浏览器支持,则直接返回
            if(document.getElementsByClassName)
            {
                return document.getElementsByClassName(classname);
            }
            // 不支持的 浏览器
            var arr = []; // 用于存放满足的数组
            var dom = document.getElementsByTagName("*");
            //alert(dom.length);
            for(var i=0;i<dom.length;i++)
            {
                if(dom[i].className == classname)
                {
                    arr.push(dom[i]);
                }
            }
            return arr;
        }

兄弟节点

  • nextSibling 下一个兄弟 亲的 ie 678 认识
  • nextElementSibling 其他浏览器认识的
  • previousSibling 同理 上一个兄弟
  • previousElementSibling
  • var div = one.nextElementSibling || one.nextSibling;

子节点

  • firstChild 第一个孩子 ie678
  • firstElementChild 第一个孩子 正常浏览器
  • var one.firstElementChild || one.firstChild;

按钮不可用

  • btn.disabled = “disabled” || btn.disabled = true; //不能用

事件兼容性写法

  • var event = event || window.event;

拖动 原理 == 鼠标按下 接着 移动鼠标 。

bar.onmousedown = function(){
            document.onmousemove = function(){ 
            }
}

拖动的时候不能选中文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

scrollTop获取值的函数封装 scroll

function scroll() {
        //判断浏览器的类型
        if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            //返回一个对象
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }

        else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
          // 检测是不是怪异模式的浏览器 
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    window.onscroll = function() {
        console.log(scroll().top);
    }
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、DOM 什么是DOM?Document Object Model(文档对象模型)。DOM是针对HTML和XML...
    空谷悠阅读 1,060评论 0赞 2
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 956评论 0赞 1
  • var utils = (function () { var flag = "getComputedStyle" ...
    love2013阅读 599评论 0赞 0
  • 2017年(6、7月)书单 不知不觉爱上了读书,爱上了分享 读书带给我不一样的内涵,让自己在不知不觉中发生了变化,...
    快乐琪阅读 913评论 0赞 1
  • 每个月总是生理期要来的时候,情绪不好,敏感的很,一点不顺心就想发火。昨天下午下班还没有走到厂门口呢,就接到朋友的电...
    月儿的2016阅读 451评论 2赞 0

友情链接更多精彩内容