HTML5的自定义属性data*详细介绍和JS操作实例

HTML5引入了一项新功能，即自定义数据属性（data*），允许开发者在标签中嵌入自定义数据，这些属性以data为前缀，可以用于存储与页面或应用相关的私有自定义数据，以下是关于HTML5自定义属性data*的详细介绍及其在JavaScript中的操作实例。

1. data*自定义属性的基本用法

data*属性允许你在HTML元素上存储额外的信息，而不会影响页面的布局和样式。

<div id="user" datauid="12345" datauname="脚本之家"></div>

在这个例子中，datauid和datauname是自定义属性，用于存储用户ID和用户名。

2. 使用getAttribute和setAttribute方法存取data*自定义属性的值

你可以使用getAttribute和setAttribute方法来获取和设置data*属性的值：

var user = document.getElementById('user');
var userId = user.getAttribute('datauid'); // userId='12345'
var userName = user.getAttribute('datauname'); // userName='脚本之家'
user.setAttribute('datasite', 'http://www.jb51.net');

这种方法适用于所有现代浏览器，但并不是HTML5引入data*属性的主要目的。

3. 使用dataset属性存取data*自定义属性的值

HTML5 JavaScript API提供了一种更便捷的方法来存取data*属性，即通过元素的dataset属性，这个属性返回一个DOMStringMap对象，包含了元素的所有data*属性：

var el = document.querySelector('#user');
console.log(el.dataset); // DOMStringMap对象
console.log(el.dataset.id); // '1234567890'
console.log(el.dataset.name); // '脚本之家'

注意，当data*属性名包含连字符时，如datadateofbirth，连字符会被去掉并转换为驼峰式命名，即dateOfBirth。

4. 删除data*自定义属性

要删除一个data*属性，可以使用delete操作符或者将其值设为null：

delete el.dataset.id;
// 或者
el.dataset.id = null;

5. data*属性选择器

在实际开发中，data*属性选择器非常有用，你可以根据自定义的data*属性选择相关的元素：

document.querySelectorAll('[dataflowering]'); // 选择所有包含'dataflowering'属性的元素
document.querySelectorAll('[datatextcolour="red"]'); // 选择所有包含'datatextcolour'属性值为red的元素

你也可以通过data*属性值对相应的元素设置CSS样式：

.user {
    width: 256px;
    height: 200px;
}
.user[dataname='feiwen'] {
    color: brown;
}
.user[dataname='css'] {
    color: red;
}

FAQs

**Q1: data*属性是否会影响页面的布局和样式？

A1: 不会，data*属性只是用于存储数据，不会影响页面的布局和样式。

**Q2: data*属性的命名规则是什么？

A2: data*属性的命名规则包括两部分：属性名不应该包含任何大写字母，并且在前缀"data"之后必须至少有一个字符；属性值可以是任意字符串。

HTML5 自定义属性 data* 详细介绍和 JS 操作实例

自定义属性 data* 的介绍

HTML5 引入了一种新的属性定义方式，即data 属性，这种属性允许开发者将任何自定义的数据附加到 HTML 元素上，而不需要担心与标准属性冲突。data 属性可以存储任何类型的数据，如数字、字符串、对象等，并可以在 JavaScript 中轻松访问。

使用 data* 属性

在 HTML 中使用data 属性非常简单，如下所示：

<div id="myDiv" datauserid="12345" datadescription="Sample description"></div>

在这个例子中，datauserid 和datadescription 都是自定义属性。

三、JavaScript 操作 data* 属性

在 JavaScript 中，可以通过getAttribute 方法获取data 属性的值，通过setAttribute 方法设置data 属性的值，通过removeAttribute 方法移除data 属性。

以下是一些具体的操作实例：

1. 获取 data* 属性的值

var div = document.getElementById('myDiv');
var userId = div.getAttribute('datauserid');
console.log(userId); // 输出: 12345

2. 设置 data* 属性的值

div.setAttribute('datauserid', '67890');

3. 移除 data* 属性

div.removeAttribute('datadescription');

4. 动态添加和修改 data* 属性

// 添加新属性
div.setAttribute('datastatus', 'active');
// 修改现有属性
div.setAttribute('datauserid', '23456');

使用 data* 属性的示例

以下是一个使用data 属性和 JavaScript 的示例，该示例展示了如何根据用户 ID 显示不同的信息：

<div id="userProfile" datauserid="12345" dataname="John Doe" dataemail="john@example.com"></div>
<script>
  var userProfile = document.getElementById('userProfile');
  var userId = userProfile.getAttribute('datauserid');
  var userName = userProfile.getAttribute('dataname');
  var userEmail = userProfile.getAttribute('dataemail');
  console.log('User ID:', userId);
  console.log('User Name:', userName);
  console.log('User Email:', userEmail);
  // 假设我们要显示用户信息
  document.write('<p>User ID: ' + userId + '</p>');
  document.write('<p>Name: ' + userName + '</p>');
  document.write('<p>Email: ' + userEmail + '</p>');
</script>

在这个示例中，我们首先通过data 属性获取了用户信息，然后使用 JavaScript 输出了这些信息，这种使用方式非常灵活，可以应用于各种不同的场景。