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版之前，您必须使用以下代码访问数据属性：
var restaurant = $(“#restaurantId”);
var owner = restaurant.data(“owner-name”);
restaurant.data(“owner-name”, “newName”);
从1.6版开始，jQuery开始使用camelCase版本的数据属性。现在，您可以使用以下代码执行相同的操作：
var restaurant = $(“#restaurantId”);
var owner = restaurant.data(“ownerName”);
restaurant.data(“ownerName”, “newName”);
您应该知道jQuery还会尝试将从data属性获得的字符串内部转换为合适的类型，例如数字，布尔值，对象，数组和null。
var restaurant = $(“#restaurantId”);
var identifier = restaurant.data(“identifier”);
console.log(typeof identifier);
// number
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
总结
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
