html - HTML5 中的 data-* 属性
问题描述
正在阅读关于 Mozilla 的一篇关于数据属性的文章。文章说您可以使用 data-* 属性来存储有关元素的额外信息。例如:
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
问题:
他们的唯一目的是将自定义元数据添加到 HTML 元素还是有其他用例?
解决方案
如何以 Angular 作为框架创建和使用自定义属性的示例(演示用例)
HTML:
<button id="monitorBtn-{{machine.id}}">
<span ng-show="!$ctrl.isMonitored(machine)">
StackOverFlow
</span>
</button>
JS:
var element = angular.element("#monitorBtn-"+machine.id);
element.attr("tooltip","Your Tooltip Text"); // <-- setting custom attr
element.attr("flow","up");
console.log(element);
这会将一个属性附加到按钮类,如下所示:
<button id="monitorBtn-{{machine.id}}" tooltip="Your tooltip Text" flow="up" ....>
当然:这个自定义类是用CSS4生成的。
CSS:
:root {
--bg: #05a8ff;
--dink: 7px;
}
[tooltip] {
position: relative;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
bottom: calc(100% + var(--dink));
}
这绝不是问题的答案,我认为这个问题没有真正的答案。它非常广泛,但我将发布此代码以让您了解 data-* attrs 如何在不同语言中工作的用例,以及 HTML 为何接受它们。
推荐阅读
- php - Ajax 没有响应,或者看起来像那样
- android - 构建时 Android Studio 错误“无法下载 bundletool.jar”
- ios - iOS Safari/Chrome/Firefox 中的 CSS 关键帧动画闪烁/不同步
- matlab - 如何将拟合曲面曲线拟合工具箱导出到矩阵?
- unity3d - 使用四元数的Unity3D相对偏移对象旋转
- angular - 使用角度和firebase获取上传文件的url“无法设置未定义的属性”
- java - 类型为内部类的通用数据类型数组创建
- oracle - Spring Boot JNDI 数据源 weblogic 12c
- selenium - 如何在现有的 REAL 浏览器中启动 selenium 或 puppeteer
- stata - 处理缺失值