全栈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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 远程连接windows2003桌面无法使用剪切板的有效解决方法

    远程连接windows2003桌面无法使用剪切板的有效解决方法

    2021年11月17日
    47
  • adb shell 命令大全_adb版本查看命令

    adb shell 命令大全_adb版本查看命令一、adb相关命令。1.关闭adb服务:adbkill-server2.开启adb服务:adbstart-server3.查看当前连接的手机设备:adbdevices4.多设设备操作,<-s虚拟设备名称>5.重启设备adbreboot–指定虚拟设备adb-s设备名称reboot6.查看日志adblogcat清除日志a…

    2022年10月18日
    1
  • html鼠标手状态,css鼠标样式cursor介绍(鼠标手型)

    html鼠标手状态,css鼠标样式cursor介绍(鼠标手型)CSS鼠标样式语法如下:任意标签中插入style=”cursor:*”例子:文本或其它页面元素文本或其它页面元素注意把*换成如下15个效果的一种:下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!hand是手型例子:CSS鼠标手型效果CSS鼠标手型效果pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。例子:CSS鼠标手型效果CS…

    2022年5月6日
    58
  • 普通大一学生的自我反思[通俗易懂]

    普通大一学生的自我反思[通俗易懂]​ 暑假高考完,得知自己被计科(普通本科)录取,便开始在知乎等地方搜索相关知识,以此来提高自己的认识。​ 先是在b站上跟着比特鹏哥学完了c语言(基础),这里又要有一大段故事了,我家在江苏扬州,大概是9月份突然爆发了疫情,就被关在家里不让出去,(在家里坐牢,核酸检测,基本隔一天就要做一次)就在B站上天天看鹏哥学c语言,一开始有新鲜劲,学起来还是很有动力的,后来学到指针,很是痛苦,就又专门去B站听了其他的指针教程,学着学着慢慢就明白了,当时每天的生活节奏基本就是,起床打开电脑学习c语言,学饿了,吃点饭(由于疫

    2022年7月15日
    13
  • pycharm怎么装第三方库jieba_python怎么导入requests库

    pycharm怎么装第三方库jieba_python怎么导入requests库PyCharm安装第三方库是十分方便的,无需pip或其他工具,平台就自带了这个功能而且操作十分简便。如下:

    2022年8月25日
    9
  • AV解决方法「建议收藏」

    AV解决方法「建议收藏」注意!!在操作之前,先删除所有分区的autorun.inf和8位随机字符.exe和,不然可能不经意又中了。。删除方法可以用Winrar或者资源管理器删除,也可以用DOS删除(PS:[url]http://hi.baidu.com/%B9%C2%B6%C0%B8%FC%BF%C9%BF%BF/blog/item/9f3fbf8fc73334fb503d9279.html[/…

    2022年9月15日
    2

发表回复

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

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