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的插件心得,如有更好的方法,请一定告知笔者。

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

时间: 2024-10-13 11:44:10

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

一段非常简单的js判断浏览器的内核!

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

一个超级简单的HTML模板框架源代码以及使用示例

HTML模板框架源代码 var HtmlTemplate = (function () { function HtmlTemplate(htmlSource) { this.htmlSource = htmlSource; } HtmlTemplate.prototype.toHTML = function (params) { var reg = HtmlTemplate.REG_FILTER_PARAM; var m = this.htmlSource.replace(reg, functi

很多时候运行tomcat 的时候总是会提示tomcat 的端口被占用 但是任务管理器里面还找不到是哪个端口被占用了 因此很多人就重新配置tomcat 或者去修改tomcat的端口号 ,其实这么做太麻烦了 ,小弟在这里告诉你一个非常简单的方法。 1.在开始菜单中选择运行 然后输入cmd 进入DOS界面。显示如下: 2.在Dos窗口中输入netstat -ano|findst

很多时候运行tomcat 的时候总是会提示tomcat 的端口被占用 但是任务管理器里面还找不到是哪个端口被占用了 因此很多人就重新配置tomcat  或者去修改tomcat的端口号 ,其实这么做太麻烦了 ,小弟在这里告诉你一个非常简单的方法. 1.在开始菜单中选择运行  然后输入cmd  进入DOS界面.显示如下: 2.在Dos窗口中输入netstat   -ano|findstr  8080(注意的 我的Tomcat 的断口号 是8080 你的断口号是多少就写多少) 输入完成后回车 会弹出下

搭建一个超级简单的spring框架

1.准备环境 (1)下载JDK.myEclipse.Tomcat,之后配置好相关的参数 备注:在myEclipse上配置Tomcat: 启动Tomcat服务后,在浏览器输入localhost:8080运行成功即表示配置成功 (2)新建一个Web Project 配置到Tomcat上 再次启动Tomcat,输入地址后,如果能运行成功即表示新建成功 2.前期准备 (1)首先下载所需要的jar包 下载地址: spring-framework-4.0.4.RELEASE-dist:http://repo

使脱排油烟机能够听懂你的话(超级简单的方法)

由于楼房的设计问题,使用的公共烟道,在每天午饭晚饭时间(周一到周五,上班时间),发生油烟倒灌的情况,真是苦不堪言,修了好几次都没有修好,怎么办? 思路: 1.周一周五工作时间,中晚饭时段,自动开启脱排油烟机. 2.平时,自己需要做饭的时候,用一种简单的方法快速开闭油烟机(比如语音控制) 现在介绍一种非常简便的方法: 一.准备 1.需要购买小米的zigbee的智能插座(这款比较便宜,) 2.购买小米米家多功能网关(是智能家居的中心) 3.购买小米ai智能音箱(为了实现语音控制功能) 4.安装"米家

一个非常简单的方法使用JavaScript打包一个网页成为安卓app(打包远景论坛)

前言: 此方法非常简单,可以挑一些移动端做的好的网站进行打包,比如 淘宝网,  京东网,网易新闻,   远景论坛 大神看了轻喷,可以自己做了玩一下,本质上也是在浏览器访问页面,灵感来源于酷安一款应用[小购物] 不过这款应用不是使用该方法                                   正文: 这里使用 远景论坛 的移动端网页来做一个示例,远景移动网页做得挺好,就是没出过app 使用 HBuilder 新建一个移动app 2. 留下这几个文件就够了 3. 代码 在 index.

创建一个超级简单的JMeter测试用例

1.建立测试计划 启动jmeter后,jmeter会自动生成一个空的测试计划,用户可以基于该测试计划建立自己的测试计划. 修改名称为ASuperSimplePlan 2.新建线程组 一个性能测试请求负载是基于一个线程组完成的.一个测试计划必须有一个线程组. 点击ASuperSimplePlan,右键:添加-->Threads(Users)-->线程组 jmeter中 每个测试计划至少需要包含一个线程组,当然也可以在一个计划中创建多个线程组,在测试计划下面多个线程是并行执行的,也就是说这些线程组

QT 读取文件夹下所有文件(超级简单的方法,不需要QDirIterator)

之前,用标准C++写过读取文件夹.现在用QT重写代码,顺便看了下QT如何实现,还是相当简单的.主要用到QDir,详细文档可见这里 A program that lists all the files in the current directory (excluding symbolic links), sorted by size, smallest first: ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 #in

使用Python开发一个超级简单的接水果小游戏,零基础也可以学会

Pylash项目地址 创建项目 这样的话我们的项目就创建好了,然后只用往Main.py里填写代码运行即可. 编写Hello World小程序 编写游戏 有以上对pylash的小小了解,我们接下来可以开始编写游戏了.首先我们把第四行以后所有代码删除. 引入所需 全局变量 游戏里面要用到一些全局变量,大家先浏览一遍,不同知道它们是干什么的,之后会用到: 加载资源 创建开始界面 在main函数中我们调用了gameInit函数,所以添加这个函数: 开始游戏 舞台层鼠标点击事件的监听器是startGame