现在，您可以使用这些数据属性来为访客搜索餐厅并对其进行排序。例如，您现在可以向他们显示特定距离内的所有素食餐厅。
除data-前缀之外，有效的自定义数据属性的名称只能包含字母，数字，连字符（-），点（。），冒号（:)或下划线（_）。它不能包含大写字母。
使用数据属性时，应牢记两件事。
首先，存储在这些属性中的数据应为string类型。可以进行字符串编码的任何内容也可以存储在数据属性中。所有类型转换都需要使用JavaScript进行。
其次，仅当没有其他适当的HTML元素或属性时才应使用数据属性。例如，不适合存储元素的classin data-class属性。
元素可以具有任意数量的数据属性以及所需的任何值。
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
数据属性和CSS
您可以在CSS中使用数据属性使用属性选择器来设置元素的样式。您还可以借助该attr()功能（以工具提示或其他方式）将存储在data属性中的信息显示给用户。
造型元素
回到我们的餐厅示例，您可以使用属性选择器为餐厅的背景提供不同的提示，以提示用户餐厅的类型或其与餐厅的距离。这是一个例子：
li[data-type=‘veg’] {
background: #8BC34A;
}
li[data-type=‘french’] {
background: #3F51B5;
}
创建工具提示
您可以使用工具提示向用户显示与元素相关的一些其他信息。
我建议您将这种方法用于快速原型，而不是用于生产网站，这尤其重要，因为不能完全访问纯CSS工具提示。
您要显示的信息可以存储在data-tooltip属性中。
<span data-tooltip=“A simple explanation”>Word</span>
然后，您可以使用::before伪元素将数据呈现给用户。
span::before {
content: attr(data-tooltip);
// More Style Rules
}
span:hover::before {
display: inline-block;
}
使用JavaScript访问数据属性
有3种方法可以访问JavaScript中的数据属性。
使用getAttribute和setAttribute
您可以在JavaScript中使用getAttribute()和setAttribute()获取并设置不同数据属性的值。
如果给定属性不存在，则该getAttribute方法将返回null或为空字符串。这是使用这些方法的示例：
var restaurant = document.getElementById(“restaurantId”);
var ratings = restaurant.getAttribute(“data-ratings”);
您可以使用该setAttribute方法来修改现有属性的值或添加新属性。
Report Advertisement
restaurant.setAttribute(“data-owner-name”, “someName”);
使用数据集属性
属性的帮助是访问数据属性的一种更简单的方法dataset。此属性返回一个DOMStringMap对象，其中每个自定义数据属性都有一个条目。
使用该dataset属性时，应牢记一些注意事项。
通过三个步骤将自定义数据属性转换为DOMStringMap键：
-
该
data-前缀从属性名称中删除 -
名称中删除所有后跟小写字母的连字符，并将其后的字母转换为大写
-
其他字符将保持不变。这意味着任何不带小写字母的连字符也将保持不变。
然后可以使用存储在对象中的camelCase名称作为键（如）来访问属性element.dataset.keyname。
访问属性的另一种方法是使用括号表示法，例如 element.dataset[keyname]
考虑以下HTML：
<li data-type=“veg” data-distance=“2miles” data-identifier=“10318” data-owner-name=“someName”>
Salad King
</li>
这里有一些例子：
var restaurant = document.getElementById(“restaurantId”);
var ratings = restaurant.dataset.ratings;
restaurant.dataset.ratings = newRating;
var owner = restaurant.dataset[‘ownerName’];
restaurant.dataset[‘ownerName’] = ‘newOwner’;
现在**，所有主流浏览器都支持此方法，并且您应该比以前的方法更喜欢它**来访问自定义数据属性。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
使用jQuery
您还可以使用jQuery data()方法访问元素的数据属性。在jQuery 1.6版之前，您必须使用以下代码访问数据属性：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
最后写上我自己一直喜欢的一句名言：
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
