如何在 HTML 中声明自定义属性？

属性是为 HTML 元素提供的额外信息。 HTML 中有很多预定义的属性。

当预定义的属性对存储额外数据没有意义时，自定义属性允许用户创建自定义数据。如果要在 HTML 中定义自己的自定义属性，可以通过data-*格式来实现。 * 可以替换为您的任何名称，以指定元素的特定数据并在 CSS、JavaScript 或 jQuery 中定位它。在定义自定义属性之前，需要记住一些规则。

• 您必须以小写字母定义您的属性。即使某些浏览器会自动更正标记中的错误，它也会导致错误，并且它们不是有效的 HTML5。
• 不能以 XML 开头（不区分大小写）
• 它不应包含任何冒号字符(:)。

任何普通的 HTML 元素都可以通过 HTML data-* 属性变得相当复杂和自定义。让我们为这篇文章在 HTML 中定义一个简单的文章标签并存储一些额外的信息。您可以在 JavaScript 和 CSS 中访问这些值，并根据您的目的使用它们。您甚至可以定义类似于预定义标签的名称。自定义属性 data-id 不同于通常使用的id标签。您可以控制这些值并对其进行测试。

例子：

HTML

  

    
        body {
            background-color: "red";
        }
  
        article[data-parent="GFG"] {
            width: 1000px;
            font-size: 50px;
            color: green;
        }
  
        article[data-parent="GFG2"] {
            width: 600px;
            color: black;
            font-size: 50px;
        }
    

  

    
        Sample GFG article on Custom Attributes.
    
  
    
        Sample GFG second article 
        on Custom Attributes.
    
  
    
        const article = document.getElementById('1');
        const article2 = document.getElementById('2');
  
        // "custom-attributes"
        console.log(article.dataset.title);
  
        // "GFG"
        console.log(article.dataset.parent);
          
          
        // "custom-attributes-2"
        console.log(article2.dataset.title);
          
        // "GFG2"
        console.log(article2.dataset.parent);
    

  

输出：

自定义属性