• JavaScript,一个超级简单的方法判断浏览器的内核前缀


      先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断。

      大家应该还记得JavaScript行内样式怎么写吧?(看来我是废话了!)

      在前端开发过程中,有时我们需要判断浏览器的内核前缀,对不同的浏览器做出不同的处理,因此我们可以这么做。

      alert(element.style.webkitTransition); 这个是获取以webkit为前缀的transition值。但如果不是webkit为前缀的浏览器,则会返回undefined。而我们可以将所有的内核前缀给枚举出来,然后获取其某个CSS的值,即可做出判断。代码如下:

    function getVendorPrefix() {
        // 使用body是为了避免在还需要传入元素
        var body = document.body || document.documentElement,
            style = body.style,
            vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
            i = 0;
    
        while (i < vendor.length) {
            // 此处进行判断是否有对应的内核前缀
            if (typeof style[vendor[i] + 'Transition'] === 'string') {
                return vendor[i];
            }
            i++;
        }
    }

      然后只需要调用getVendorPrefix()即可知道浏览器的内核前缀,如果返回undefined则证明浏览器不支持CSS3属性,即没有内核前缀。

      大家应该知道,我们在写代码的过程中,能写CSS就不写JavaScritp,毕竟CSS的性能会比自己写JS的高一些,因此,我们在开发一些实际应该中,会用到transition,比如一个简单的图片轮播,我们可以使用CSS3的transition,也可以使用jQuery的animate或自己写原生,但CSS3的性能肯定会高一些,因此我们可以写两套代码,对于支持CSS3的浏览器则使用animation,而不支持的则使用计时器或animate。这样的话能够获取更好的用户体验。

      以上是看jquery.slides.js的插件心得,如有更好的方法,请一定告知笔者。

  • 相关阅读:
    多线程,超时处理
    多线程,超时处理
    多线程,超时处理
    如何使用vue2搭建ElementUI框架
    pip 报错 ssl_.py:339: SNIMissingWarning: An HTTPS request has been made, but the SNI
    从单机到2000万QPS: 知乎Redis平台发展与演进之路
    OAuth2和JWT
    收集统计信息 不会更新DDL时间
    Python爬虫入门教程 8-100 蜂鸟网图片爬取之三
    Python爬虫入门教程 7-100 蜂鸟网图片爬取之二
  • 原文地址:https://www.cnblogs.com/wuyuchang/p/3917720.html
Copyright © 2020-2023  润新知