美文网首页
如何判断浏览器是否支持元素的某个属性和方法

如何判断浏览器是否支持元素的某个属性和方法

作者: 大庆无疆 | 来源:发表于2019-02-18 22:20 被阅读0次

typeof返回的是一个字符串
我们可以使用typeof来查看返回的类型,当属性不存在时,返回的是undefined。
我们可以使用typeof来获取一个变量是否存在,如if(typeof a!="undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,

正因为typeof遇到null,数组,对象时都会返回object类型(函数例外,遇到函数返回function),所以当我们要判断一个对象是否是数组时
或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法instanceof

例如:
var box = document.getElementById('box');
console.log(typeof box.a);  //输出undefined,没有a属性
console.log(typeof box.id); //输出string

例如:

 textContent属性和innerText属性相类似
 他们的区别在哪里呢?浏览器兼容问题,有的支持textContent,有的支持innerText,有的两个都支持
所以这里我们处理他们的兼容问题,不过以后一般不需要处理,因为别人已经帮我们处理好了
我们怎么知道浏览器支不支持哪个属性呢?
我们可以使用typeof来查看返回的类型,当属性不存在时,返回的类型是undefined,存在的话会返回string(是字符串形式哦).
//现在我们写一个函数,可以接受一个元素,然后获取元素的内容文本并输出
function getContent(element) {
    if((typeof element.innerText) === 'string') {   //判断传入的元素是否支持innerText属性
        console.log(element.innerText);     //支持的话打印内容
    }else { //不支持的话就使用element.textContent
        console.log(element.textContent);
    }
}
判断是否支持该方法
//我们的函数的事件名不带on
        function addEventListener(element, eventName, fn) {
            // 判断是否有该方法
            if(element.addEventListener) {
                //如果有执行这里
                element.addEventListener(eventName, fn);
            }else if(element.attachEvent) {
                element.attachEvent('on'+ eventName, fn);
            }else {
                element['on' + eventName] = fn;
            }
        }

相关文章

网友评论

      本文标题:如何判断浏览器是否支持元素的某个属性和方法

      本文链接:https://www.haomeiwen.com/subject/hhttyqtx.html