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

2024-06-24 11:08:10阅读量：40 字体：大 中 小

不管我们对浏览器类型前缀有多么的讨厌，我们都不得不每天面对它，否者有些东西不能正常工作。这些前缀的用法有两种：在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浏览器类型前缀的两种方法》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

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

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

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

    阅读: 937

  • 苹果下载记录永久删除

    苹果下载记录永久删除

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

    阅读: 895

  • vivos12分屏模式怎么开启

    vivos12分屏模式怎么开启

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

    阅读: 964

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

    苹果睡眠起床闹钟删不掉

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

    阅读: 795

  • 怎么把小红书的视频提取出来

    怎么把小红书的视频提取出来

    小红书的视频可以通过保存视频的方式提取到手机上，小红书通过保存提取视频的具体步骤如下： 怎么把小红书的视频提取出来 1、打开小红书app，然后选择需要提取的视频。 2、选择需要提取的视频后，选择右上...

    阅读: 1859

  • 抖音可以注销了重新注册吗

    抖音可以注销了重新注册吗

    抖音注销了可以重新注册，抖音账号注销后，一般需要两个星期过后才可以重新注册账号。具体的操作方式如下： 抖音可以注销了重新注册吗 1、打开抖音，点击进入我”的界面。 2、进入我&rdquo...

    阅读: 846

热门文章

最近更新