用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浏览器类型前缀，希望大家喜欢。

免责声明：

本文《用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

热门文章

最近更新