HTML5 自定义属性
1.什么是自定义属性
- 特殊属性：例如id，class，checked这类属性有特殊的作用，设定后将影响元素渲染，同时点语法也能获取到这些属性值
- 自定义：自定义属性使用"data-"开头的属性，只存在标签中，无法通过点语法无法获取
<div data-animal-type="鱼类" data-price="20">金枪鱼</div>
2.获取/修改自定义属性的值
- 自定义属性集合：一个标签中所有的自定义属性都封装在该标签元素的dataset属性中，可以通过它来操作自定义的属性
- 注意：通过dataset操作自定义属性时要去掉"data-"前缀，且对于含有"-"字符的属性名要使用使用驼峰法
<body>
<div data-animal-type="鱼类" data-price="20">金枪鱼</div>
</body>
</html>
<script>
var div = document.querySelector("div")
// 获取自定义属性对象
console.log(div.dataset) //DOMStringMap {animalType: "鱼类", price: "20"}
// 获取price自定义属性的值
console.log(div.dataset.price) //20
// 获取animal-type自定义属性的值(使用驼峰法)
console.log(div.dataset["animalType"]) //鱼类
console.log(div.dataset["animal-type"]) //undefined
</script>
3.与setAttribute()的区别
- dataset和setAttribute()添加的属性都会出现在标签中，且dataset设置的属性会自动添加"data-"前缀
- dataset只能获取"data-"开头的属性，而getAttribute()所有的属性都可以获取
<body>
<div data-animal-type="鱼类" data-price="20">金枪鱼</div>
</body>
<script>
var div = document.querySelector("div")
// 使用setAttribute设置xxx属性
div.setAttribute("xxx","abc")
// 使用dataset设置添加自定义属性yyy(自动添加"data-"前缀)
div.dataset.yyy = "def"
// 使用getAttribute读取自定义属性(不能漏掉"data-"前缀)
console.log(div.getAttribute("data-price")) //20
// 使用setAttribute修改自定义属性(不能漏掉"data-"前缀)
div.setAttribute("data-animal-type","水里游的")
</script>
运行结果：
<div data-animal-type="水里游的" data-price="20" xxx="abc" data-yyy="def">金枪鱼</div>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了