迹忆客 专注技术分享

我们将介绍一种使用 JavaScript 切换 HTML 元素类的方法。

在 JavaScript 中鼠标悬停时切换 HTML 元素的类

切换类意味着如果没有为 HTML 元素分配类名，则可以动态为其设置类名，或者如果特定类已经存在，则可以动态删除它。在计算中，鼠标悬停是当用户将指针移动或悬停在触发区域上时激活的图形控制元素，通常使用鼠标。

JavaScript 中引入了切换功能。在 JavaScript 文件中，我们使用 querySelector() 方法返回与文档中指定的 CSS 选择器匹配的第一个元素。在下面的文件中，#container id 与 <div> 元素相关联；因此我们在变量容器上得到了 <div> 元素。为了实现在鼠标悬停时切换类所需的功能，我们需要使用 addEventListener() 方法，该方法将事件处理程序附加到 HTML 文档。我们使用的实际事件是 mouseenter 和 mouseleave 事件。mouseenter 事件发生在鼠标指针移动到元素上时。mouseleave 事件在鼠标指针移出元素时发生。

当 mouseenter 事件发生时，我们使用 classList 属性、add() 和 remove() 方法。当鼠标指针移动到 <div> 元素类上时，第一个 div 元素被 remove() 方法移除，而 second 类被添加到 <div> 元素。类似地，当鼠标指针移出时，它会添加类 first 并删除类 second。因此，当鼠标悬停在 <div> 元素上时实现切换。

我们有一个 HTML 文档，其中分别使用 <link> 和 <script></script> 标签在 HTML 文档上指定了指向 CSS 文件 styles.css 和 JavaScript 文件 index.js 的链接。我们想要实现将鼠标指针悬停在要切换的 <div> 元素上的功能。我们将使用 JavaScript 来做到这一点。在 HTML 中，我们有由 id 容器唯一标识的 <div> 元素，并且类 first 已经与同一个元素相关联。

在 CSS 中，我们定义类选择器的属性和值。我们使 CSS 变得简单，类 first 有一个属性 background，其值为绿色。类似地，类 second 有一个属性 background 并且值为 orange。

示例代码：

<div id="container" class="first">
  <h1>
    JavaScript is Easy
  </h1>
</div>

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function() {
  this.classList.remove('first');
  this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
  this.classList.add('first');
  this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

在 JavaScript 中单击鼠标时切换 HTML 元素的类

我们可以在鼠标单击时使用 JavaScript 切换 HTML 类，就像我们在上面的方法中为鼠标悬停在事件上所做的那样。例如，创建一个带有 <p> 标签、id 为 p 的段落。在标签内写一些文字。然后，创建一个带有 onclick 属性的 <button> 标签。使用 onclick 属性调用函数 myFunc()。在标签之间写入文本 Button。

在 CSS 中，使用类选择器选择 paragraphClass，并将 font-size 设置为 30px，将 color 设置为 red。在 JavaScript 中，编写 myFunc() 函数并使用 getElementById 选择 HTML 的 p id 并存储在 para 变量中。使用变量调用 classList 属性，然后调用 toggle() 方法。编写 paragraphClass 类作为 toggle() 方法的参数。

我们使用 getElementById() 方法获取了变量 para 中的 p 元素。使用 classList 属性，我们使用 toggle() 函数来 <p> HTML 文档的元素。当点击底部并执行 myFunc() 时，CSS 类选择器 paragraphClass 在 <p> 元素上打开和关闭。因此，通过单击鼠标底部来实现切换。

示例代码：

<p id="p">
        Click Button to toggle between classes
</p>
<button onclick="myFunc()">
        Button
</button>

      .paragraphClass {
            font-size: 30px;
            color: red;
        }

function myFunc() {
  var para = document.getElementById('p');
  para.classList.toggle('paragraphClass');
}