在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写,否则是undefinde 使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

   小写

<div id="app" data-app="app">
驼峰式
let cour = document.querySelector('#cour');

获取data-的值
let  app = document.querySelector('#app');
let cour = document.querySelector('#cour');
console.log (app.dataset.app);
console.log (cour.dataset.courcd);
 
 

HTML5 data属性的更多相关文章

  1. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

  2. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  3. js 获取html5的data属性

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...

  4. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  5. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  7. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  8. HTML5学习总结——HTML5新增属性与表单元素

    一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

  9. HTML 5:你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

随机推荐

  1. 聊聊 cursor鼠标样式

    在前端开发中,很多时候需要对页面的某些元素做鼠标样式的处理,比如button一般用pointer , 文本区一般用text......等等. 今天咱就来聊聊 这个经常用到的 cursor 属性 cur ...

  2. h5py库安装问题解决

    H5py官网教程完全有问题,这个大家都这么说,但是貌似问题出现在Numpy上,由于numpy的版本过高! 这里是官网的教程:http://docs.h5py.org/en/latest/build.h ...

  3. Flutter实例一--底部规则导航栏制作

    先来看看制作效果: 前置知识--StatefulWidget  StatefulWidget具有可变状态(state)的窗口组件(widget).使用时要根据变化状态,调整State值, 能够快速初始 ...

  4. python学习笔记_week24

    note 内容回顾: Model - 数据库操作 on_delete Query_set select_related 跨表数据一次性拿过来,不增加sql查询次数.帮助跨表,后面参数只能加连表字段 f ...

  5. Angular.js入门

    一.引入angular.js  <script type="text/javascript" src="../plugins/angularjs/angular.m ...

  6. VC中明明已经添加了头文件却还提示未定义的问题

    我在VS中编译程序遇到这个错误:error C3861: 'ReadDirectoryChangesW': identifier not found, even with argument-depen ...

  7. Linux 远程登录配置

    如果使用FlashFxp的sftp无法登陆,提示SSH 错误: 协商认证模式失败,也同样这样操作 修改你的ssh配置文件 配置文件路径如:/etc/ssh/sshd_config PasswordAu ...

  8. WPF线性渐变画刷应用之——炫彩线条

    效果图: Xaml代码: <Rectangle Width="800" Height="10"> <Rectangle.Fill> &l ...

  9. mui longtap 事件无效

    1.mui  的部分事件默认是关闭的 需要在init中单独配置事件开关 mui.init({ gestureConfig: { longtap: true, //默认为false } })

  10. Delphi FrieDAC 大数据处理

    Delphi FrieDAC 大数据处理 大数据处理, 要用到Array DML 插入数据 先要设置插入的数据量 FQuery1.Params.ArraySize := 1000; for index ...