Html5之自定义属性(data-,dataset)

当网页中需要存储一些自定义的信息，但是并不适合用HTML中固有的属性来描述时，可以使用自定义属性（Custom Data Attributes）。HTML5提出了两种自定义属性的写法：data-和dataset。

什么是data-属性？

data-属性是一类可以在HTML元素上存储自定义数据的属性。它们被设计为“根据HTML5规范自定义的”，并且只允许小写字母和短横线（ - ）作为属性名的一部分。一个HTML元素可以有很多个data-属性，每个属性可以存储一个自定义的字符串值。我们可以通过JavaScript来访问和操作这些属性。

使用方法

<div data-color='red' data-value='100'>自定义属性示例</div>

在这个例子中，我们为<div>元素定义了两个自定义属性data-color和data-value，它们的属性值分别是red和100。

JavaScript访问属性值

可以通过dataset属性来访问元素设置的自定义属性。例如，可以使用以下代码来访问上述示例中<div>元素的data-value属性值：

var divEl = document.querySelector('div');
var value = divEl.dataset.value;
console.log(value);  // 输出：100

注意，在访问data-属性名时，需要去掉属性名中的-符号，然后使用驼峰式的命名方式在dataset对象中访问。例如，在上述代码中，我们使用dataset.value来访问data-value属性的值。如果想要获取所有的data-属性，可以使用dataset对象的keys方法。

var divEl = document.querySelector('div');
var data = divEl.dataset;
var keys = Object.keys(data);  // 获取所有data-属性
console.log(keys);  // 输出：["color", "value"]

什么是实际属性dataset？

除了使用data-属性以外，HTML5还引入了一个在JavaScript中更易于操作和访问的实际属性dataset。

使用方法

与data-属性类似，可以使用dataset对象来访问元素设置的自定义属性，例如：

<div data-color='red' data-value='100'>自定义属性示例</div>

var divEl = document.querySelector('div');
var color = divEl.dataset.color;
console.log(color);  // 输出：red

注意使用dataset属性可以在JavaScript中直接访问data-*的属性值，在使用时属性名没有要求规范。具体使用时按照在HTML文档中的写法即可。

JavaScript修改自定义属性

可以使用JavaScript来动态修改自定义的data属性，例如：

var divEl = document.querySelector('div');
divEl.dataset.color = 'green';

在执行完上述代码后，<div>元素的data-color属性的值变为了green。

上述是对HTML5自定义属性（data-和dataset）的详细讲解和两个示例的说明。在实际的编程中，我们可以使用它来存储自定义信息和配置数据，并通过JavaScript来访问、操作和修改。