阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      请设计一个 JavaScript 函数,该函数接受一个 CSS 属性名作为参数,并返回一个 boolean 值,表明浏览器是否支持这个属性

      问题

      当我们使用 CSS3新属性,比如:box-shadow 或者transition 时,我们怎么检测 浏览器是否支持这些属性? 请设计一个 JavaScript 函数,该函数接受一个 CSS 属性名作为参数,并返回一 个 boolean 值,表明浏览器是否支持这个属性

      参考答案

      首先看单个怎么来判断,可以下面这种的;

      var element = document.createElement('div');
      if ('text-overflow' in element.style) {
        element.style['text-overflow'] = 'ellipsis';
        return element.style['text-overflow'] === 'ellipsis';
      } else {
        return false;
      }
      

      然后开始封装

      var supports = (function () {
        var div = document.createElement('div'),
          vendors = 'Khtml Ms O Moz Webkit'.split(' '),
          len = vendors.length;
        return function (prop) {
          if (prop in div.style) return true;
          prop = prop.replace(/^[a-z]/, function (val) {
            return val.toUpperCase();
          });
          while (len--) {
            if (vendors[len] + prop in div.style) {
              // browser supports box-shadow. Do what you need.
              // Or use a bang (!) to test if the browser doesn't.
              return true;
            }
          }
          return false;
        };
      })();
      
      if (supports('textShadow')) {
        document.documentElement.className += ' textShadow';
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录