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

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;
            }
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 0. 写在前面 当你开始工作时,你不是在给你自己写代码,而是为后来人写代码。 —— Nichloas C. Zak...
    康斌阅读 5,402评论 1 42
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,286评论 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,933评论 1 45
  • 从小到大看过那么多的爱情故事,让人潸然泪下或者思绪万千的数不胜数。但若要排个序的话,我想有个故事是一定会排在第一位...
    书生梦话阅读 5,031评论 2 5
  • 今天从崭新而又平常的早晨准点醒来,准点早餐,准点上学、上班。人的潜力是无穷的,学了统筹,忙中就会出效率,课听...
    深海碧玉阅读 325评论 0 1