如何使用 JavaScript 检查浏览器是否支持 CSS 属性？-js教程-PHP中文网

首页

web前端

js教程

如何使用 JavaScript 检查浏览器是否支持 CSS 属性？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 27, 2023 pm 11:09 PM

概述

当今世界，系统上有各种可用的浏览器。因此，有时某些级联样式表 (C.S.S.) 属性无法在该浏览器上运行。因此，为了检查特定浏览器支持哪些 CSS 属性，JavaScript 有内置方法 CSS.supports()，该方法检查浏览器是否支持该特定属性。所有浏览器都支持 supports() 方法：Opera、Edge、Chrome 和 Firefox。

语法

CSS.supports() 方法以键值对作为输入，该键值对为字符串格式。使用的基本语法是 -

CSS.supports(“propertyName:value”);

supports() - 这是CSS对象的一个方法，它检查浏览器是否支持supports参数中传递的属性。
propertyName - 这包含 CSS 属性的名称，例如显示、位置、边距、填充、z-index、文本对齐等。
value - 它采用特定属性的值，例如 flex、absolute、relative、20 px、left、right 等。

因此，为了了解有关 CSS.Supports() 方法的更多信息，我们将通过一些示例进行学习。

方法 1 - 在此示例中，我们将直接将 CSS 样式键值作为参数传递给 CSS.supports() 方法，然后该方法将确定给定的 CSS 属性是否为该浏览器支持。

算法

第 1 步 - 使用 CSS 对象内存在的supports()方法作为CSS.supports()。
第 2 步 - 将任何级联样式表 (CSS) 属性作为参数传递。
第 3 步 - 使用 console.log() 在控制台中打印 CSS.supports() 方法。
第 4 步 - 如果传递属性时返回 true，则该特定属性受支持，否则浏览器不支持。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check CSS property exist in browser using js</title>
</head>
   <body>
      <h1 id="Open-console-to-see-result-by-pressing-ctrl-shift-i-or-F-on-keyboard">Open console to see result by pressing (ctrl + shift + i) or F12 on keyboard</h1>
      
      <script>
         console.log(CSS.supports("float:top"));
         console.log(CSS.supports("float:right"));
         console.log(CSS.supports("float:bottom"));
         console.log(CSS.supports("float:left"));
      </script>
   </body>
</html>

输出

上述代码的输出如下图所示。由于“float:top”和“float:bottom”属性无效，它们将在控制台中返回 false，而“float:right”和“float:left”属性如果有效并且被浏览器支持，它们将返回true。

方法 2 - 在这种方法中，我们将构建一个用户界面，用户可以在给定字段中输入 CSS 属性，并可以检查他们的浏览器或浏览器是否支持这些 CSS 属性。不是。

算法

第 1 步 - 创建一个两个搜索框，一个用于键，另一个用于值，因为 CSS 属性采用键值形式。将它们的特定 ID 分别指定为“propertyName”和“pval”。创建另一个输出字段和一个 HTML 按钮。
步骤 2 - 在 JavaScript 中创建一个名为 checkCss() 的函数。将使用箭头函数。
第 3 步 - 访问两个输入框并将它们存储在变量中，将这些框的值连接到变量中。
第 4 步 - 在 CSS.supports() 中传递此串联变量并检查 if-else 条件。
第 5 步 - 如果返回 true，则支持该 CSS 属性，否则返回 false，则不支持该属性。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check CSS property exist in browser using js</title>
   <style>
      body{
         min-height: 90vh;
         display: flex;
         place-content: center;
         flex-direction: column;
         text-align: center;
         background-color: #0a0a0a;
         color: white;
      }
      input{
         width:13rem;
         margin: 5px auto;
         padding: 0.3rem;
         outline: none;
      }
      button{
         width: 5rem;
         margin: 0 auto;
         padding: 0.2rem;
         cursor: pointer;
         background-color: transparent;
         box-shadow: 0 0 5px white;
         border-radius: 5px;
         color: white;
         border: none;
      }
   </style>
</head>
   <body>
      
      <h1 id="CSS-Property-Validator">CSS Property Validator</h1>
      <div id="output" style="width:5rem;margin: 5px auto;padding: 0.2rem;"></div>
      <input type="text" id="propertyName" placeholder="Enter propertyName*">
      <input type="text" id="pval" placeholder="Enter value*">
      <button onclick="checkCss()">Check</button>
      
      <script>
         checkCss = () => {
            var p = document.getElementById("propertyName").value;
            var v = document.getElementById("pval").value;
            var pv = p + ":" + v;
            if(CSS.supports(pv)){
               document.getElementById("output").innerText=CSS.supports(pv);
               document.getElementById("output").style.background="green";
               document.getElementById("output").style.color="white";
            } else {
               document.getElementById("output").innerText=CSS.supports(pv);
               document.getElementById("output").style.background="tomato";
               document.getElementById("output").style.color="white";
            }   
         }
      </script>
   </body>
</html>

输出

上述代码的输出如下图所示，用户可以在给定的输入框中键入 CSS 属性，并检查您的浏览器是否支持这些属性，如下图所示“display:block”属性受浏览器支持且有效，它返回 true。

输出如下图所示，返回false，因此输入框中填写的属性无效，浏览器不支持。

结论

supports() 方法的返回类型是 Boolean，因为它返回 true 或 false，具体取决于当前浏览器是否支持 CSS 属性。示例 2 界面对于开发人员特别有用，因为它消除了重复检查控制台的需要；只需在输入字段中输入您的 CSS 属性名称和值，您就会被告知当前浏览器是否支持。

以上是如何使用 JavaScript 检查浏览器是否支持 CSS 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

See all articles