正文

JavaScript原生方法给元素添加CLASS示例

/0 浏览量
0419

在网页开发中，给 HTML 元素添加或移除 CSS 类（CLASS）是改变元素外观的常用技巧。JavaScript 提供了多种方法来实现这一功能，其中原生方法之一就是使用 className 属性。下面，我将通过一个详细的示例来讲解如何使用 JavaScript 原生方法为元素添加 CLASS。

1. 理解 className 属性

className 属性可以用来获取元素的当前类名，或者设置元素的类名。当你设置 className 时，你可以直接指定一个字符串，这个字符串包含了新的类名。如果新的类名已经存在，那么这个属性会替换掉所有的类名。

2. 准备示例元素

首先，我们需要一个 HTML 元素，以便对其进行操作。以下是一个简单的 HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加 CLASS 示例</title>
<style>
  .highlight {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>
  <div id="myElement">点我看看变化</div>
  <script src="example.js"></script>
</body>
</html>

在这个例子中，我们有一个 div 元素，它的 ID 是 myElement。我们希望点击这个元素后，给它添加一个 highlight 类，使其文字变成红色并加粗。

3. 编写 JavaScript 代码

现在，我们将使用 JavaScript 来为这个元素添加 highlight 类。以下是一个名为 example.js 的 JavaScript 文件，其中包含了实现这一功能的代码：

// 获取元素
var element = document.getElementById('myElement');

// 添加事件监听器
element.addEventListener('click', function() {
  // 添加 CLASS
  this.className += ' highlight';
});

代码解释：

  • 使用 document.getElementById 获取页面中 ID 为 myElement 的元素。
  • 使用 addEventListener 方法为该元素添加一个点击事件监听器。
  • 当元素被点击时，执行函数内的代码。
  • this.className += ' highlight'; 这行代码会将 highlight 类添加到元素的类名中。如果 className 已经有其他类，则 highlight 会作为新的类追加到现有类名之后。

4. 测试和结果

保存 example.js 和上面的 HTML 文件。在浏览器中打开 HTML 文件，点击 div 元素。你应该会看到元素文字变成了红色并加粗，这是由于我们成功地为元素添加了 highlight 类。

通过上述示例，你可以了解到如何使用 JavaScript 的原生方法来给元素添加 CLASS。这种操作非常基础，但在网页编程中非常实用，能够帮助你轻松实现元素的样式变化。

-- 展开阅读全文 --