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

    1. 字符串截取:left(str, length) mysql> select left('sqlstudy.com', 3); +-------------------------+ | l ...

  2. (6)C++ 函数

    一.基本知识  1.为什么需要原型? 原型描述了函数到编译器的接口,将函数返回值类型以及参数类型.参数数量告诉编译器. 首先原型告诉编译器方法存在某些参数,如果没有原型会让编译器捕获这种错误. 其次函 ...

  3. flask-sqlalchemy报错 Object '<User at xxxx>' is already attached to session '1' (this is '2')

    报错:  Object '<User at xxxx>' is already attached to session '1' (this is '2') 结论:      两个不同的db ...

  4. StaticInjectorError[Http]:

    报错:AppComponent.html:28 ERROR Error: StaticInjectorError[Http]: StaticInjectorError[Http]: 解决方法:

  5. 前端学习笔记——引入css文件、样式优先级

    CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的  ...

  6. prim算法【最小生成树1】

    适用范围:要求无向图 prim算法(读者可以将其读作“普里姆算法”)用来解决最小生成树问题, 其基本思想是: ·对图G(VE)设置集合S,存放已被访问的顶点, ·然后每次从集合V-S中选择与集合S的最 ...

  7. Vue手把手教你撸一个 beforeEnter 钩子函数

    地址 :https://www.jb51.net/article/138821.htm 地址 :https://www.jb51.net/article/108964.htm

  8. 24-python基础-python3-浅拷贝与深拷贝（2）

    4.copy 模块的 copy()和 deepcopy()函数   在处理列表和字典时,尽管传递引用常常是最方便的方法,但如果函数修改了传入的列表或字典,可能不希望这些变动影响原来的列表或字典.要做到 ...

  9. 处理CSS前缀问题的神器——AutoPrefixer

    众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量. What is AutoPre ...

  10. 结对编程收获——UI真的没有那么简单

    结对编程收获——UI真的没有那么简单                                                      詹元成 初看作业要求,心里还有一点欣喜,不就是做一个UI ...