全栈JavaScript之路(十八)HTML5 自己定义数据属性「建议收藏」

全栈JavaScript之路(十八)HTML5 自己定义数据属性

大家好,又见面了,我是全栈君。

HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀。

目的是为元素提供与页面渲染无关的信息、或者语义信息。这些属性名能够任意加入,仅仅要带上前缀 data- 开头就能够。

<div id="myid" data-appid="1" data-appname="csdn"></div>

加入属性这后能够通过 dataset 訪问自己定义属性,dataset 属性 是DOMStringMap  类型的实例。 也是一个 key : value 的键值对。

注冊:每个data-name  形式的属性 相应。 dataset 的 name 属性。

以上面的样例来说; 

var div = document.getElementById("myid");
div.dataset.appid ===' 1'; //true
div.dataset.appname ==='nama';//true

能够设置自己定义属生的值:

div.dataset.appid = "100"

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/116559.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【OpenCV入门教程之十二】OpenCV边缘检测:Canny算子,Sobel算子,Laplace算子,Scharr滤波器合辑

    【OpenCV入门教程之十二】OpenCV边缘检测:Canny算子,Sobel算子,Laplace算子,Scharr滤波器合辑本篇文章中,我们将一起学习OpenCV中边缘检测的各种算子和滤波器——Canny算子,Sobel算子,Laplace算子以及Scharr滤波器。文章中包含了五个浅墨为大家准备的详细注释的博文配套源代码。在介绍四块知识点的时候分别一个,以及最后的综合示例中的一个。依然是是放出一些程序运行截图吧:效果图看完,我们来唠唠嗑。首先,需要说明的是,浅墨这篇文章最后的示例代码是采用两周前刚刚发布的2.4.9来书写的。里面的lib都已经改成了2.4.9版本的。如果大家需要运行的话,要么配置好2.4.9.要么把浅墨

    2022年5月30日
    33
  • 程序员写个人技术博客的价值与意义

    程序员写个人技术博客的价值与意义文章目录什么是博客主要用途博客分类个人博客使用第三方平台个人博客与独立博客的优缺点使用第三方平台个人博客的优点独立博客的优点没写博客的原因浪费时间工作太忙,没时间写懒于思考,疏于总结怕自己的技术被别人学到,被别人超越想写,但不知道写什么技术含量低,写出来没意义,怕别人嘲笑写博客最初的想法写博客的价值与意义加深对技术点的理解,记录足迹,反映成长,分类检索,方便日后查阅观点碰撞,分享收获结交更多志同道…

    2022年5月20日
    38
  • 遭遇mysql数据库表满错误

    遭遇mysql数据库表满错误

    2021年8月20日
    64
  • html 5简易的影片播放器

    html 5简易的影片播放器

    2021年8月9日
    70
  • StoredProcedure — 存储过程

    StoredProcedure — 存储过程1.声明变量DECLARE@F001SMALLINT,           @F002INTEGER,           @F003VARCHAR(20),           @F004CHAR(20),           @F002MONEY2.赋值语句set@F001=space(40)3.条件判断(IF…ELSE)Ifc

    2022年7月26日
    3
  • winscp的root连接ubuntu“拒绝访问”的解决方法

    winscp的root连接ubuntu“拒绝访问”的解决方法问题如上所示。解决:1、修改ssh配置文件:vimetc/ssh/sshd_config在#PermitRootLoginwithout-password此行下新增一行:PermitRootLoginyes保存退出。2、重启sshservicesshrestart3、重新用root账户登陆,输入密码,成功登陆。…

    2025年12月9日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号