搜索
您的当前位置:首页正文

H5data-*属性的详细介绍

2023-11-27 来源:莱芜美食
H5添加了data-*属性,非常方便

data-*属性:自定义属性来存储数据,data-值,值可以是任意字符串。

获取值:

var el = document.getElementById('div') console.log(el.getAttribute('data-created-time'))

设置值:

var el = document.getElementById('div') el.setAttribute('data-created-time','星期一')

js可以用dataset属性访问data-属性的值

<div id='div' data-mei='47' data-tree-height='2.4m'></div> var div= document.getElementById('tree') console.log(div.dataset.mei) // '47' 获取值 console.log(tree.dataset.treeHeight) // '2.4m' tree.dataset.plantHeight = '3m' //设置值

jQuery中使用obj.data("属性值")获取和设置data的值。

但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了

测试代码如下:

<html><head><script type="text/javascript" src="jquery-1.9.1.js?1.1.11"></script><script type="text/javascript">$(document).ready(function(){ $("#btn2").click(function(){ alert($("div").data("id")); alert($("div").data("Id")); alert($("div").data("otherId")); alert($("div").data("OtherId")); alert($("div").data("OTHERID"));var datas = $("div").data(); });});</script></head><body><button id="btn2">alert</button><div data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div></body></html>

alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果:

总结: 遵循标准写法

1. data-* 所有字符要小写。

2.多个单词采用横线隔开,例如data-other-id => otherId 读出来的属性会去掉横线并将首字母大写。

小编还为您整理了以下内容,可能对您也有帮助:

H5 标签里加的data属性

Html5 data-* 属性定义和用法:
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。

有三种方法访问和修改data:
1.使用getAttribute setAttribute 方法
div.setAttribute('data-options',{/*数据*/});
div.getAttribute("data-options");
2.使用dataset属性返回一个集合
div.dataset --> DOMStringMap { options:"{\"name\":\"John\"}", hidden:"true", lastValue:"43"}
可以访问,添加,删除
div.dataset.hidden
div.dataset.newAttr = "123"
delete div.dataset.hidden
3.使用jquery的data方法
.data( key, value )
.data( key, value )
.data( obj ) --> 设置多个键值对
.data( key )
.data( key )
.data() -->返回一个集合
jQuery比较特殊的是,它会将返回值字符串自动转换为对应的数据类型。
比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }
注意:对于dataset属性和jQuery的data方法: data- 属性名如果包含了连字符,例如:data-last-value ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:lastValue 。

H5 标签里加的data属性

Html5 data-* 属性定义和用法:
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。

有三种方法访问和修改data:
1.使用getAttribute setAttribute 方法
div.setAttribute('data-options',{/*数据*/});
div.getAttribute("data-options");
2.使用dataset属性返回一个集合
div.dataset --> DOMStringMap { options:"{\"name\":\"John\"}", hidden:"true", lastValue:"43"}
可以访问,添加,删除
div.dataset.hidden
div.dataset.newAttr = "123"
delete div.dataset.hidden
3.使用jquery的data方法
.data( key, value )
.data( key, value )
.data( obj ) --> 设置多个键值对
.data( key )
.data( key )
.data() -->返回一个集合
jQuery比较特殊的是,它会将返回值字符串自动转换为对应的数据类型。
比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }
注意:对于dataset属性和jQuery的data方法: data- 属性名如果包含了连字符,例如:data-last-value ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:lastValue 。

html5中的个别疑问求大湿详细说说

html5中的data-*属性,data-src data-position data-size都是自定义属性,用来存储数据。如游戏中的生命值,魔法量,攻击力,后缀名自定义。data-属性所以浏览器都支持,可用getAttribute,setAttribute,dataset获取、设置值,jquery中data()方法也可以访问data-属性。data-属性可以作为css的样式标准,如[data-xxx]{background:red;},但最好不要用。

html5中的个别疑问求大湿详细说说

html5中的data-*属性,data-src data-position data-size都是自定义属性,用来存储数据。如游戏中的生命值,魔法量,攻击力,后缀名自定义。data-属性所以浏览器都支持,可用getAttribute,setAttribute,dataset获取、设置值,jquery中data()方法也可以访问data-属性。data-属性可以作为css的样式标准,如[data-xxx]{background:red;},但最好不要用。

HTML中div里有data-index="6" 是什么意思?

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-前缀外,有效自定义数据属性的名称必须仅包含字母,数字,连字符( - ),点

(。),冒号(:)或下划线(_)。它不能包含大写字母。

HTML中div里有data-index="6" 是什么意思?

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-前缀外,有效自定义数据属性的名称必须仅包含字母,数字,连字符( - ),点

(。),冒号(:)或下划线(_)。它不能包含大写字母。

html5自定义属性怎么用data-bind=

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

html5自定义属性怎么用data-bind=

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

关于Html5的<input type="data" />的一些属性

其实这个问题不难解决,只需要你在data标签内对时间添加一个最小值就可以了~
<body>

    <input type="date" min="2013-09-23" max="***-**-**">   

    <!--  以上这行设定 min 属性控制开始日期  max 属性控制结束日期   -->

  </body>

关于Html5的<input type="data" />的一些属性

其实这个问题不难解决,只需要你在data标签内对时间添加一个最小值就可以了~
<body>

    <input type="date" min="2013-09-23" max="***-**-**">   

    <!--  以上这行设定 min 属性控制开始日期  max 属性控制结束日期   -->

  </body>

h5中data-value什么意思

本篇文章给大家带来的内容是浅谈H5的data-*中容易被忽略的一个小问题。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

H5添加了data-*属性,非常方便

但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了

测试代码如下:

<html><head><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function(){ $("#btn2").click(function(){ alert($("div").data("id")); alert($("div").data("Id")); alert($("div").data("otherId")); alert($("div").data("OtherId")); alert($("div").data("OTHERID")); var datas = $("div").data(); });});</script></head><body><button id="btn2">alert</button><div data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div></body></html>

alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果:

总结: 遵循标准写法

1. data-* 所有字符要小写。

2.多个单词采用横线隔开,例如data-other-id => otherId 读出来的属性会去掉横线并将首字母大写。

h5中data-value什么意思

本篇文章给大家带来的内容是浅谈H5的data-*中容易被忽略的一个小问题。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

H5添加了data-*属性,非常方便

但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了

测试代码如下:

<html><head><script type="text/javascript" src="jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function(){ $("#btn2").click(function(){ alert($("div").data("id")); alert($("div").data("Id")); alert($("div").data("otherId")); alert($("div").data("OtherId")); alert($("div").data("OTHERID")); var datas = $("div").data(); });});</script></head><body><button id="btn2">alert</button><div data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div></body></html>

alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果:

总结: 遵循标准写法

1. data-* 所有字符要小写。

2.多个单词采用横线隔开,例如data-other-id => otherId 读出来的属性会去掉横线并将首字母大写。

HTML5中data-role属性是什么?

为HTML文档的创作者定义他们自己的属性,须以 "data-" 开头

HTML5中data-role属性是什么?

为HTML文档的创作者定义他们自己的属性,须以 "data-" 开头

H5是什么意思?

h5是什么

html中h5可以使用input弹出时间控件的type属性是

在HTML5中,为input元素新增了以下一些type属性值:

color:用于指定颜色的控件。

date:用于输入日期的控件(年,月,日,不包括时间)。

month:用于输入年月的控件,不带时区。

week:用于输入一个由星期-年组成的日期,日期不包括时区

time:用于输入不含时区的时间控件。

datetime:基于UTC时区的日期时间输入控件(时,分,秒及几分之一秒)。

datetime-local:用于输入日期时间控件,不包含时区。

email:用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。

number: 用于应该包含数值的输入域。只能输入数字

range:用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

search:用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel:用于输入电话号码的控件。在移动端输入会显示数字键盘,PC端无效果

url:用于编辑URL的字段。

莱芜美食还为您提供以下相关内容希望对您有帮助:

H5 标签里加的data属性

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或...

请问大神,HTML中div里有data-index="6" 是什么意思 谢谢

从属性名称开始在数据集中删除“data-”,它仍然包含在HTML中。请注意,如果你的自定义属性名称中有一个连字符,当通过数据访问时这会呈现出camel-case形式,即(“data-product-category” 变成“productCategory”)。5、其他...

html5自定义属性怎么用data-bind=

使用data-*可以解决自定义属性混乱无管理的现状。

h5中data-value什么意思

于data-value,这种命名方法是HTML5推荐的方式,用于定义要缓存的数据,data-*在新锐浏览器中会放到一个叫dataset的对象中。比如: 复制代码 代码如下: 12:00 我们可以通过如下方式访问到它: 复制代码 代码如下: var el=...

关于Html5的&lt;input type="data" /&gt;的一些属性

&lt;!-- 以上这行设定 min 属性控制开始日期 max 属性控制结束日期 --&gt; &lt;/body&gt;&lt;/html&gt;type="date" 只在支持它的浏览器有效,所以在不支持的浏览器(如IE6)中,会把所有不支持类型的type默认为 type="text"...

HTML5中data-role属性是什么?

为HTML文档的创作者定义他们自己的属性,须以 "data-" 开头

前端调试时data-v有什么作用

提供属性。前端调试时data-v为H5新增的为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过getAttribute方法获取。

h5中data-to属性怎样获取动态变量

这种方法的属性(setAttrName)可以是一个变量。例如:[javascript] view plain copy print?var obj = { attr: { } };var egData = ['oneAttr', 'twoAttr', 'threeAttr'];for (var i = 0; i &lt; egData....

html5 data-bind属性怎么用

我只知道,date-bind属性是knockoutJs里用于页面和js里对象绑定(实现MVVC架构)

css中的 data-spm是什么特性

没什么特别的地方,其实好比某个元素(可能是个div)给你一个口袋,名字必须以data开头,加上“-”,他们就是你自己命名的小口袋,在本例中的这个小口袋的名字是data-spm,你把数据放在这个专属小口袋中,然后在使用js的...

Top