怎么自定义html,怎么自定义HTML标签

回答:

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

一,创建HTML5文件:

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

6db1fff175f808ed1a1df8a9146a2322.gif

fe02adb4286215386362734b8d69e94c.gif

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

二,创建元素:

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

a196dff02f41ff038c607b7567018778.gif

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

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

三,添加测试按钮

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

f863dfc472783406a718487b9532b88d.gif

四,获取属性:

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

96a40821df5a61d94be59ee978527098.gif

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

五,获取数据:

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

8eb8eaf751efb6e4f20e26435dc97476.gif

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

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

六,其他模块、函数

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

314d9c24f4b5b90c449e961c1881f158.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值