p5.js 元素 hasClass() 方法(1)

📌 相关文章

📜 p5.js 元素 hasClass() 方法(1)

📅 最后修改于: 2023-12-03 15:03:27.428000 🧑 作者: Mango

p5.js 元素 hasClass() 方法

在 p5.js 中，我们可以使用 hasClass() 方法来检查元素是否具有特定的 CSS 类。该方法的语法如下：

hasClass(className)

其中，className 参数是要检查的 CSS 类的名称。

此方法将返回一个布尔值，指示元素是否具有指定的类。如果元素具有该类，则返回 true；否则，返回 false。

示例

下面的示例演示了如何使用 hasClass() 方法来检查元素是否具有特定的 CSS 类。在此示例中，我们有一个包含 box 类的 <div> 元素和两个按钮。第一个按钮将调用 hasClass() 方法来检查 <div> 元素是否具有 box 类，并显示结果。第二个按钮将添加 box 类到 <div> 元素中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>p5.js hasClass() 方法示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="myDiv" class="box"></div>
    <button onclick="checkClass()">检查类</button>
    <button onclick="addClass()">添加类</button>
    <script>
      function checkClass() {
        var elem = document.getElementById("myDiv");
        if (elem.hasClass("box")) {
          alert("元素具有 'box' 类！");
        } else {
          alert("元素不具有 'box' 类！");
        }
      }

      function addClass() {
        var elem = document.getElementById("myDiv");
        elem.classList.add("box");
      }
    </script>
  </body>
</html>

在上面的代码中，我们首先定义了一个 CSS 类 .box，它将 <div> 元素的背景颜色设置为红色。然后，我们定义了一个具有 box 类的 <div> 元素，以及两个按钮。当第一个按钮被单击时，checkClass() 函数将调用 hasClass() 方法来检查 <div> 元素是否具有 box 类，并显示一个警告框，指示元素是否具有该类。当第二个按钮被单击时，addClass() 函数将添加 box 类到 <div> 元素中。