zoukankan      html  css  js  c++  java
  • [译]JavaScript检测浏览器前缀

    原文地址: Detect Vendor Prefix with JavaScript

    不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情。这些前缀可以用于CSS(比如 -moz-element 中的 -moz- )和JavaScript( navigator.mozApps )的格式化。牛逼的X-Tag项目使用了一个很巧妙的方法在浏览器环境中获取前缀 —— 让我们来看一下是如何实现的吧!

    demo


    首先,获取HTML元素的 CSSStyleDeclaration :

    var styles = window.getComputedStyle(document.documentElement, ''),

    下一步,将获取到的 CSSStyleDeclaration 转换为数组对象,并且与我们已知的前缀匹配,如果没有匹配到,我们就赋值给Opera前缀:

    pre = (Array.prototype.slice
          .call(styles)
          .join('') 
          .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
        )[1]

    获取到了CSS前缀,JS前缀就简单的多了:

     dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
      }

    返回值是像下面形式的对象:

    Object {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}

    完整的实现如下:

    var prefix = (function () {
      var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice
          .call(styles)
          .join('') 
          .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
        )[1],
        dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
      return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
      };
    })();

    demo


    从HTML元素中获取 CSSStyleDeclaration 的方法很独到。这个方法说明在样式声明里,总有一些一些带前缀的属性,虽然他们不那么找人喜欢。这个方法在未来很长一段时间都是有效的。你觉得这个方法怎么样呢?


    翻译的不怎样,文章挺短,看原文体验更好(囧。。)。Ratchet项目就是用了这个方法。

  • 相关阅读:
    Bootstrap(项目2)
    Bootstrap(项目1)
    Bootstrap(Carousel幻灯片)轮播图
    Bootstrap(滚动监听)
    Bootstrap基础10(标签页)
    Bootstrap基础9(工具提示框、警告框、弹出框)
    Bootstrap基础8(模态框(弹窗))
    Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)
    Bootstrap基础6(路径导航)
    2018~2019学年下学期《计算机图像处理》
  • 原文地址:https://www.cnblogs.com/zjzhome/p/4777038.html
Copyright © 2011-2022 走看看