HTML中div里有data-index="6" 是什么意思?
发布网友
发布时间：2022-04-30 20:53
共4个回答
热心网友
时间：2022-04-20 00:47
HTML中div里有data-index="6" 是自定义属性data-index的值为6的意思。
自定义数据属性的好处:
我们经常需要存储与不同DOM元素相关的信息。这些信息对读者来说可能并不重要，但如果
能够轻松访问它，将使我们的开发人员的生活变得更加轻松。
例如，假设您在网页上列出了不同的餐馆。在HTML5之前，如果您想存储有关餐馆提供的食物
类型或访问者距离的信息，您可以使用HTML class属性。如果您还需要存储餐厅id以查看用户
想要访问的特定餐厅，该怎么办？
为了摆脱这些问题，HTML5引入了自定义数据属性。名称以元素开头的元素的所有属性data-
都是数据属性。您还可以使用这些数据属性来设置元素的样式。
接下来，让我们深入了解数据属性的基础知识，并学习如何在JavaScript中访问它们的值。
正如我之前提到的，数据属性的名称将始终以data-。这是一个例子：
<li data-type="veg" data-distance="2miles" data-identifier="10318">
Salad King</li>
您现在可以使用这些数据属性来搜索和排序访问者的餐馆。例如，您现在可以向他们展示一定
距离内的所有素食餐厅。
扩展资料：
使用自定义属性的注意事项：
1、存储在这些属性中的数据应为string类型。任何可以进行字符串编码的东西也可以存储
在数据属性中。所有类型的转换都需要在JavaScript中完成。
2、只有在没有其他适当的HTML元素或属性时才应使用数据属性。例如，在元素class中存
储元素是不合适的data-class。
3、除data-前缀外，有效自定义数据属性的名称必须仅包含字母，数字，连字符（ - ），点
（。），冒号（:)或下划线（_）。它不能包含大写字母。
热心网友
时间：2022-04-20 02:05
这是自定义的属性。
javascript可以获取html元素自定义的属性，后面可以根据这些属性来做相应的动作。
例如：使用jquery获取data-index的值
#html<div id = 'div'><span data-field='demo'></span></div>#jsalert($('#div>span').data('field'));
输出:demo
扩展资料：
注意事项
在获取自定义属性的值时，使用dataset属性，然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性，用于和data-*配合使用。
通过each打印的结果，需要注意：
1，如果data-后面包含了“-”，例如 date-e-name，"-"会去掉，并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。
2，如果data-后面的单词有大写，例如 myName，将会转存成小写 myname。这里就不理解为什么会转换成小写了，JSON Object的key是区分大小写的。
3，如果你想删除一个data-*属性，使用 delete dataset.cname或者dataset.cname=null;
热心网友
时间：2022-04-20 03:39
您好，这是HTML5的新功能自定义属性，意思是获取编号为“6”的自定义属性
HTML5 增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置需要的自定义属性，进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。
下面是来自developdrive的使用攻略译文
1、创建HTML5文件：
如果你还没想好要使用哪一个，可以复制下面的代码：
在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。
2、创建元素：
首先，添加一些简单的内容和自定义属性以及ID等元素，以便我们能够识别JavaScript示例。
正如你所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果你想验证网页是否有效可才采用这种方法。
当然，项目细节部分决定了自定义属性对你是否有用，以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。
自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。
3、添加测试按钮
在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：
获取属性：
在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是我们要做的第一步。在页面的head脚本区域添加以下函数：
这里，我们为示例增加了alert 值，当然你也可以根据自身需求在脚本中添加。
4、获取数据：
你可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。
从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。
请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-proct-category” 变成“proctCategory”)。
5、其他模块、函数
我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。
你也可以使用DOM方法或者数据集来删除某个属性：
结束语：
在HTML5中实现自定义属性技术上并不是很复杂，真正困难的是选择使用的方法是否适用于你的项目；如果适用，该如何使其更有效？请记住，现在启用数据集方法作为页面功能还为时尚早，毕竟很多浏览器暂不支持此功能。
热心网友
时间：2022-04-20 05:31
这是自定义的属性。javascript可以获取html元素自定义的属性，后面可以根据这些属性来做相应的动作。
