HTML5中自定义数据属性data-*属性jq如何操作data-*
warning:
这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。
在HTML5中，可以使用data-*属性来存储页面的自定义数据。这些属性可以通过JavaScript访问。jQuery提供了一些方法来操作这些属性。
- 获取
data-*属性的值：
var value = $('#element').data('key');- 设置
data-*属性的值：
$('#element').data('key', 'value');- 删除
data-*属性的值：
$('#element').removeData('key');示例代码：
<!DOCTYPE html>
<html>
<head>
<title>data-* 操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="example" data-role="page" data-title="示例页面"></div>
<script>
$(document).ready(function(){
// 获取data-title属性的值
var title = $('#example').data('title');
console.log(title); // 输出: 示例页面
// 设置data-role属性的值
$('#example').data('role', 'updated');
// 删除data-title属性
$('#example').removeData('title');
});
</script>
</body>
</html>在这个例子中，我们首先获取了data-title属性的值，然后设置了data-role属性的值，并在最后删除了data-title属性。
评论已关闭