js 获取class属性的值|极客笔记

js 获取class属性的值

在前端开发中，经常需要使用 JavaScript 来操作 DOM 元素。其中，获取元素的 class 属性是一个常见的需求。本文将详细介绍如何使用 JavaScript 来获取 DOM 元素的 class 属性值。

通过原生 JavaScript 获取 class 属性的值

在 JavaScript 中，我们可以使用 getElementById、getElementsByClassName 或者 querySelector 等方法来获取 DOM 元素。下面我们以一个简单的示例来说明如何获取 DOM 元素的 class 属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Class Attribute Value</title>
</head>
<body>
    <div class="container">
        <p class="text">Hello, World!</p>
    </div>

    <script>
        const element = document.querySelector('.text');
        const classValue = element.className;
        console.log(classValue);
    </script>
</body>
</html>

在上面的示例中，我们通过 document.querySelector 方法选择了 class 为 text 的元素，并使用 className 属性获取了该元素的 class 属性值。最后，我们通过 console.log 打印出了获取到的值。

运行该代码，你将在控制台中看到输出为：

text

通过 jQuery 获取 class 属性的值

如果你习惯使用 jQuery 来操作 DOM 元素，那么获取 class 属性的值也是非常简单的。下面是一个使用 jQuery 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Class Attribute Value with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <p class="text">Hello, World!</p>
    </div>

    <script>
         $(document).ready(function(){ const classValue =$ ('.text').attr('class');
            console.log(classValue);
        });
    </script>
</body>
</html>

在上面的示例中，我们使用了 $('.text').attr('class') 方法来获取 class 为 text 的元素的 class 属性值，并通过 console.log 打印出了该值。

运行该代码，你将在控制台中看到输出为：