检查两个数据属性是否匹配，然后将类添加到元素

要检查两个数据属性是否匹配，并根据结果将类添加到元素，可以使用JavaScript来完成这个任务。以下是一个详细的步骤和示例代码：

基础概念

数据属性：HTML5引入了自定义数据属性（data-*），允许你在元素上存储额外的信息。
类（Class）：在HTML中，类用于定义元素的样式或行为。
JavaScript：一种广泛使用的脚本语言，可以操作DOM（文档对象模型）来动态修改网页内容。

类型与应用场景

类型：常见的应用场景包括表单验证、响应式设计、动态主题切换等。
应用场景：当需要根据某些条件（如用户输入、数据状态等）来改变页面元素的样式时，这种方法非常有用。

示例代码

假设我们有两个元素，分别具有data-id属性，我们需要检查这两个属性是否相同，并根据结果添加一个类matched到其中一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Data Attributes</title>
    <style>
        .matched {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="element1" data-id="123">Element 1</div>
    <div id="element2" data-id="123">Element 2</div>

    <script>
        function checkAndAddClass() {
            const element1 = document.getElementById('element1');
            const element2 = document.getElementById('element2');

            if (element1.dataset.id === element2.dataset.id) {
                element1.classList.add('matched');
            }
        }

        // 在页面加载完成后执行检查
        window.onload = checkAndAddClass;
    </script>
</body>
</html>

解释

HTML部分：
- 定义了两个div元素，每个元素都有一个data-id属性。

CSS部分：
- 定义了一个名为matched的类，当元素添加了这个类时，背景颜色会变为黄色。
JavaScript部分：
- checkAndAddClass函数获取两个元素的data-id属性并进行比较。
- 如果两个属性值相同，则将matched类添加到第一个元素。
- 使用window.onload确保在页面完全加载后再执行检查和添加类的操作。