用JavaScript判断CSS浏览器类型前缀的两种方法

2024-06-24 11:08:10阅读量:36 字体:

不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作。这些前缀的用法有两种:在CSS里(例如“-moz-”)和在JS里。有一个神奇的 X-Tag 项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的!

比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chrome 是 "-webkit-"。JavaScript 有多种方式判断它们。

方法1: 特性判断

用JavaScript判断CSS浏览器类型前缀的两种方法

通过创建一个div,给其分别添加 -webkit-、-moz-、-o-、-ms- 的前缀 css 样式,然后获取 style,通过 style.xxxTransition 判断是哪种前缀。

方法2: getComputedStyle 获取 documentElement 所有样式再解析

先通过 window.getComputedStyle 获取 styles,将 styles 转成数组

Chrome arr 如下

能看到取到了具有各自浏览器自身实现的 CSS 前缀名称。

把所有属性连接成一个字符串,然后用正则表达式匹配就能找出前缀了

我们看到 方法2 比 方法1 代码量少了许多。无论是方法1 和 方法2 ,都采用匿名函数一次性执行后返回结果,不需要每次判断都调用一下函数。

以上内容就是小编通过两种方法给大家介绍的用JavaScript判断CSS浏览器类型前缀,希望大家喜欢。

推荐阅读

  • 微信接龙管家小程序怎么用

    微信接龙管家小程序怎么用

    接龙管家小程序,解决了微信/QQ群消息刷屏、无统计、无反馈、无留存的痛点。以下是如何使用微信接龙管家小程序的操作方法: 微信接龙管家小程序怎么用 1、打开微信app,点击搜索按钮,搜索接龙小程序&rd...

    阅读: 734

  • vivo手机查定位找手机

    vivo手机查定位找手机

    vivo手机系统有查定位找手机的功能,可以利用vivo公司的云服务功能来进行查定位找手机,操作步骤如下: vivo手机查定位找手机 1、打开手机的设置,点击首行的个人头像,进入账号中心页面中。 2、...

    阅读: 743

  • ipad一直语音播报触屏滑不了

    ipad一直语音播报触屏滑不了

    ipad一直语音播报触屏滑不了是因为ipad开启了旁白的功能,需要去设置内把该功能进行关闭,操作步骤如下: ipad一直语音播报触屏滑不了 1、打开ipad的设置,点击辅助功能”按钮,进入...

    阅读: 814

  • 苹果下载记录永久删除

    苹果下载记录永久删除

    苹果手机的下载记录是不能删除的,但是可以设置隐藏起来不显示在已购项目中,操作方法如下: 苹果下载记录永久删除 1、打开手机的App Store,点击右上角的苹果id头像,进入账户的页面。 2、点击已...

    阅读: 763

  • vivos12分屏模式怎么开启

    vivos12分屏模式怎么开启

    vivos12手机的系统自带有分屏的功能,有需要的用户可以开启手机的分屏模式,具体的操作步骤如下: vivos12分屏模式怎么开启 1、打开手机,用手指从手机屏幕的底部向上滑动,这一过程中手指不要松开...

    阅读: 805

  • 苹果睡眠起床闹钟删不掉

    苹果睡眠起床闹钟删不掉

    苹果手机系统有一个睡眠起床闹钟的功能,这个闹钟是无法删除的,但是可以进行关闭,操作步骤如下: 苹果睡眠起床闹钟删不掉 1、打开手机的时钟app,进入下方的闹钟”界面。 2、点击起床闹钟的...

    阅读: 689