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. IE8 indexOf

    因为ie8中的js数组没有indexOf方法,所以使用之前要先加入这段js代码 if (!Array.prototype.indexOf) { Array.prototype.indexOf = fu ...

  2. 极致CMS建站系统后台GETSHELL

    起因 正在学习代码审计 看到有人提交了一个注入https://www.cnvd.org.cn/flaw/show/CNVD-2019-42775 想试试看还有没有别的漏洞 受影响版本 v1.6.3 - ...

  3. 关于 AfxGetStaticModuleState ()

    写MFC的DLL的时候,总会在自动生成的代码框架里看到提示,需要在每一个输出的函数开始添加上AFX_MANAGE_STATE (AfxGetStaticModuleState()).一直不明白这样做的 ...

  4. 高级UI晋升之自定义view实战(七)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章自定义ViewGroup实现瀑布流效果来进行详解dispatchTouch ...

  5. 五分钟学GIS | 快速生成地图瓦片秘籍

    什么是地图瓦片? 地图瓦片是包含了一系列比例尺.一定地图范围内的地图切片文件.地图瓦片按照金字塔结构组织,每张瓦片都可通过级别.行列号唯一标记.在平移.缩放地图时,浏览器根据金字塔规则,计算出所需的瓦 ...

  6. ASE团队项目alpha阶段Frontend组 scrum2 记录

    ASE团队项目alpha阶段Frontend组 scrum2 记录 本次会议于11.5日, 11:30在微软北京西二楼13158研讨室,讨论持续15分钟 与会人员:Jingyi Xie, Jiaqi ...

  7. Rendering Problems The following classes could not be found:- android.support.v7.internal.app.WindowDecorActionBar (Fix Build Path, Create Class)

    如图出现如下的错误的时候,一般都是升级Androdi Studio 后导致的,引入库不全,或者其他 东西缺少 可以如下解决方案:

  8. 2018-2-13-安装-aria2

    title author date CreateTime categories 安装 aria2 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 + ...

  9. redis性能

  10. Codeforces 1166F 并查集 启发式合并

    题意:给你一张无向图,无向图中每条边有颜色.有两种操作,一种是询问从x到y是否有双彩虹路,一种是在x到y之间添加一条颜色为z的边.双彩虹路是指:如果给这条路径的点编号,那么第i个点和第i - 1个点相 ...