在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. es6(10)--Set,Map(2)

    //Map与Array的对比 { let map=new Map(); let array=[]; //增 map.set('t',1); array.push({t:1}); console.inf ...

  2. mysql5.7-windows安装配置

    sonar要求mysql5.6版本以上,所以安装一下最新的mysql5.7 采用相对名路径和命令行启动,这样是为了方便迁移.也提供了加入服务的指令,但没有进行测试 解压mysql的zip压缩包 解压后 ...

  3. System.Data.DbType映射关系

    有如下类型的映射对照: System.Data.SqlClient.SqlDbType  System.Data.OleDb.OleDbType System.Data.Odbc.OdbcType S ...

  4. ROS-by-example的安装

    在这里我之前用的VM12安装成功之后,仿真器机器人会有问题,故把电脑做成双系统的形式来重新安装: 环境:Ubuntu14.04 LTS 32bits ROS版本:ROS Indigo 在学习本部分之后 ...

  5. An error was encountered while running(Domain=LaunchSerivcesError, Code=0)

    今天突然遇到这样一个错误,编译可以通过,但是运行就会弹出这个错误提示: An error was encountered while running(Domain=LaunchSerivcesErro ...

  6. CoordinateLayout简介

    CoordinateLayout简介 参考:CoordinatorLayout CoordinatorLayout is a super-powered FrameLayout. Coordinato ...

  7. nginx 服务器 在 centos7 系统下的两种方式

    选用系统 Centos7 < 一 >  使用 yum 安装,该方法比较方便,如果不追求版本推荐使用 01, 添加 nginx 储存库  yum -y install epel-releas ...

  8. css:margin和padding的百分之使用

    #app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...

  9. javap——查看class文件的方法

    有时候为了研究Javac的原理,要去看看class文件的内容是如何组织的,这时候很有必要查看class文件.方法有很多种,这里推荐使用JDK自带的javap工具. 首先建立如下源码: public c ...

  10. matt cutts : try something new for 30 days

    30 天尝试新事物matt cutts : try something new for 30 days[小计划帮你实现大目标] 是否有些事情, 你一直想去做, 但就是没有实现?马特 ?卡茨建议: 尝试 ...