HTML5 中的自定义属性是什么？

自定义属性是不属于标准 HTML5 属性但显式创建的属性。它们允许我们将自己的信息添加到 HTML 标记中。这些不是特定的，可以与所有 HTML 元素一起使用。通过自定义属性存储的额外信息是不需要具有任何定义含义的数据。这些数据是页面或应用程序私有的。自定义属性也称为数据属性。

任何名称以data-开头的属性都是自定义属性。 data-*属性允许我们在所有 HTML 元素上嵌入自定义属性。用户代理完全忽略了这些。存储的数据可以在页面的 JavaScript 中使用。我们还可以使用这些数据属性来设置元素的样式。

句法：

自定义属性的两个部分：

1. 属性名称– 属性名称必须在前缀“data-”之后至少有一个字符。它不应包含任何大写字母。
2. 属性值——要存储的值可以是任何字符串。

示例 1：在这个示例中，我们将用 JavaScript 读取这些属性的值，非常简单。事实上，有不止一种方法可以做到这一点。一种更简单的方法是使用getAttribute()和setAttribute()。 getAttribute() 可用于从属性中获取存储的数据。如果要求的属性不存在，它将返回 null 或空字符串。 setAttribute() 可用于修改任何现有属性的值或添加新属性。

文件名：index.html

HTML

 

    GeeksForGeeks

 

    Welcome To GFG
    
        
            Geek1
        
         
        
            Geek2
        
         
        
            Geek3
        
         
        
            Geek4
        
    
     
    

 

custom_attributes.js：此 JavaScript 文件将处理将使用 getAttribute() 访问的自定义属性。每当单击列表项时，我们将使用它来创建警报。 JavaScript 代码如下所示：

Javascript

function showPosition(runner) {
    var position = runner.getAttribute("data-position");
    alert("The " + runner.innerHTML + " is " + position + ".");
}

输出：

输出画面

示例 2：在此示例中，我们将看到访问数据属性的另一种方法是使用数据集属性。此属性返回一个 DOMStringMap 对象，其中每个自定义数据属性都有一个条目。 DOMStringMap 键是自定义数据属性的转换形式。 “data-”前缀已从属性名称中移除。名称中的任何连字符也会被删除。这样，我们就得到了一个驼峰命名法。然后可以使用存储在对象中的 camelCase 名称作为 key 访问属性，例如element.dataset.keyname或element.dataset[keyname] 。 我们将列出食物清单。自定义属性将包含食物类型。 onclick 属性将在单击项目时触发 JavaScript。

HTML

 

    GeeksForGeeks

 

    Welcome To GFG
    
        
            Apple
        
         
        
            Potato
        
         
        
            Cabbage
        
         
        
            Chicken
        
    
     
    

 

custom_attributes.js：只要点击一个项目，就会触发这个代码片段。在这里，我们将使用数据集属性提醒存储在自定义属性中的食物类型。代码片段如下所示：

Javascript

function handleFood(food) {
    var foodType = food.dataset.foodType;
    alert(food.innerHTML + " is " + foodType +".");
}

输出：

输出画面

示例 3：在此示例中，我们将使用刚刚看到的 CSS 访问设置元素的背景颜色。由于自定义属性是纯 HTML 属性，因此可以从 CSS 访问它们。例如，我们可以使用属性选择器来设置元素的背景颜色。

文件名：index.html

HTML

 

    
    

 

    
Welcome To GFG
    
Informational text entries
 
 
    
Blogathon 2021
 

 

styles.css：选择 styles.css 文件中的元素，并使用标准 CSS 属性设置元素的背景颜色。

CSS

p[data-about='blog'] {
  background-color: #C2F784;
}
 
p[data-info='blogathon'] {
  background-color: #DF2E2E;
}

输出：

输出画面