如何设置HTML自定义属性

首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如果之前有尝试过，会发现，容易忽略标记验证，而HTML5可以为提供在有效的网页内创建并使用自己的元素属性的功能。

创新互联建站是一家以网站建设、网页设计、品牌设计、软件运维、seo优化、小程序App开发等移动开发为一体互联网公司。已累计为成都假山制作等众行业中小客户提供优质的互联网建站和软件开发服务。

一，创建HTML5文件：

如果还没想好要使用哪一个，可以复制下面的代码：

在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。

二，创建元素：

首先，添加一些简单的内容和自定义属性以及ID等元素，以便能够识别JavaScript示例。

正如所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果想验证网页是否有效可才采用这种方法。

自定义属性允许以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。

三，添加测试按钮

在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：

四，获取属性：

在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是要做的第一步。在页面的head脚本区域添加以下函数：

这里，为示例增加了alert 值，当然也可以根据自身需求在脚本中添加。

五，获取数据：

可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。

从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。

请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-product-category” 变成“productCategory”)。

六，其他模块、函数

我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。

html5 自定义属性需要以data开始吗

所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。确切的说data-*并不是自定义属性，而是解决自定义属性的一种方案。因为大部分自定义属性都是为了在标签上存储数据。

data-*里存储的内容可以使用JavaScript语言直接读取。相比不用data-*自定义属性更容易读取和存储。

data-*可以大大提高工作效率，例如ajax请求后获得的一列数据需要放在li标签里，那么我们在循环生产li标签的同时，可以依次设置data-*属性，这样，我们在写JavaScript语言来操作li标签的时候，可以直接读取自定义的属性来获取li标签对应的数据对象。

data-*自定义属性可以使用jQuery库来解决兼容问题。

html5自定义属性怎么写

div id="newTest" myAttr="getAttr"/div

这里的“myAttr”就是这个标签的自定义属性了。

如果定义了属性却使用不了，那么这个属性就没有任何意义了，接下来就是如何去调用我们的自定义属性的值了。

在IE浏览器里，我们通过获取对象后直接调用就可以了

document.getElementById("newTest").myAttr;

关于HTML5如何自定义属性

HTML5新增自定义属性的特性,在HTML代码中,我们可以在标签上直接定义自定义属性,自定义属性命要以'data-'开头

p data-hello="这是自定义属性的值"呵呵呵呵/p

我们可以使用原生JS获取到自定义属性的值

let p = document.querySelector('p')

console.log(p.dataset.hello) //这是自定义属性的值

也可以通过jquery获取自定义属性的值

$('p').data('hello') //这是自定义属性的值

当然,也可以通过传统的方法来获取自定义属性的值

let p = document.querySelector('p')

p.getAttribute('data-hello');

p.setAttribute('data-hello','这是重新赋值')

//jquery

$('p').attr('data-hello')  //获取

$('p').attr('data-hello','设置')  //设置

如何使用HTML5自定义数据属性

html5有自定义属性的功能，格式是data-* = "xxx"（*表示自定义的属性名，xxx表示数据）。