1. <div id="box" aaa="bbb" data-info="hello"></div>
  2. <body>
  3. <script>
  4. var box = document.getElementsByTagName("div")[0];
  5. console.log(box.dataset['info']);
  6. console.log(box.id);//box
  7. console.log(box.aaa);//undefined 标签的自定义属性无法映射到对象身上
  8. console.log(box.getAttribute('aaa'));//bbb 自定义属性需要使用getAttribute进行获取
  9. /*
  10. * HTML5的属性设置与读取
  11. * */
  12. box.setAttribute('data-my-name','liyinghao');//data-my:liyinghao
  13. console.log(box.dataset['myName']);//liyinghao
  14. box.getAttribute('myName');//不能获取到属性值
  15. </script>
 

HTML5自定义属性的设置与获取的更多相关文章

  1. 关于H5中自定义属性的设置和获取

    自定义数据属性是在HTML5中新加入的一个特性.简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值.自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进D ...

  2. JQuery自定义属性的设置和获取

    Jquery操作自定义属性的方法,很简洁: $("#test").attr("test","aaa") // 设置 $("#tes ...

  3. JS自定义属性的设置与获取

    以前感觉用JQuery来设置自定义属性很方便,现在没有用JQuery,要用原生的JavaScript来操作自定义属性. Jquery操作自定义属性的方法,很简洁: $("#test" ...

  4. HTML5自定义属性之data-*

    HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...

  5. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

  6. jQuery中使用data()方法读取HTML5自定义属性data-*实例

    如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...

  7. Jquery 操作HTML5自定义属性data-*

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

  8. HTML5自定义属性操作

    一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...

  9. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

随机推荐

  1. 汇编学习(1)——win7 64位调出debug

      一.安装方法: 1.下载一个dosbox和win7 32位debug.exe,安装dosbox,打开页面 2. 将debug.exe放入磁盘根目录,这里以D盘为例.在dosbox中输入mount ...

  2. MySQL 计算中位数

    mysql中位数 奇数取中间的值,偶数取中间两个数的平均值 eg: 12345 中位数4 1234 中位数2.5 SELECT avg(t1.money) as median_val FROM ( S ...

  3. 《Java技术》 第二次作业

    java第二次作业 (一)学习总结 1.学习使用Eclipse关联jdk源代码,查看String类的equals()方法,截图,并学习其实现方法.举例说明equals方法和==的区别. 在Eclips ...

  4. 购买一台阿里云云主机(CentOS)后

    系统的优化优化之前,首先查看版本信息 cat /etc/redhat-release CentOS release 6.9 (Final) 查看内核版本 uname -a Linux iZwz98ak ...

  5. vue input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...

  6. 洛谷 P2023 维护序列——线段树

    先上一波题目 https://www.luogu.org/problem/P2023 复习了一波线段树 题目涉及的操作有区间加 区间乘以及区间求和 tips:线段树在传标记的时候 优先传乘法标记再传加 ...

  7. jumpserver注意事项以及报错处理

    需要注意下面亮点 在使用jumpserver过程中,有一步是系统用户推送,要推送成功,client(后端服务器)要满足以下条件: 后端服务器需要有python.sudo环境才能使用推送用户,批量命令等 ...

  8. 十次艳遇单例设计模式(Singleton Pattern)

    1.引言 单例设计模式(Singleton Pattern)是最简单且常见的设计模式之一,在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访 ...

  9. PHP操作XML方法之 XML Expat Parser

    XML Expat Parser 简介 此PHP扩展实现了使用PHP支持JamesClark编写的expat.此工具包可解析(但不能验证)XML文档.它支持PHP所提供的3种字符编码:US-ASCII ...

  10. 代理-jdk动态代理

    1.基于接口的实现,要jdk动态代理的类必须要实现一个接口: 2.中介类:实现了InvocationHandler,并重写这个接口的 方法(public Object invoke(Object pr ...