在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. mysql-5.7.16-winx64解压版安装超详细图文教程

    1.安装: 将下载的mysql-5.7.16-winx64压缩包解压后的整个目录放在自己喜欢的位置,我的放在D盘根目录下 2.配置: 进入mysql-5.7.16-winx64目录,将里面的my-de ...

  2. org.springframework.boot.builder.SpringApplicationBuilder.<init>

    新建了一个Spring cloud项目,启动时报错org.springframework.boot.builder.SpringApplicationBuilder.<init> 翻阅资料 ...

  3. mysql给查询的结果添加序号

    1.法一: select  (@i:=@i+1)  i,a.url from  base_api_resources a  ,(select   @i:=0)  t2 order by a.id de ...

  4. JDK源码阅读顺序

      很多java开发的小伙伴都会阅读jdk源码,然而确不知道应该从哪读起.以下为小编整理的通常所需阅读的源码范围. 标题为包名,后面序号为优先级1-4,优先级递减 1.java.lang 1) Obj ...

  5. jquery给按钮绑定事件

    JQuery: $(function(){ $("#btn1").bind("click",function(){ $("#div1").s ...

  6. Boolean类型

    Boolean类型是与布尔值对应的引用类型.如果要创建Boolean对象,语法如下: var booleanObject = new Boolean(true); Boolean类型的实例重写了val ...

  7. APP-7-百度地图移动轨迹

    1.代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  8. es6新特性之箭头函数

    <script> { // es3,es5 var evens = [1, 2, 3, 4, 5]; var odds = evens.map(function (v) { return ...

  9. Xcode 新建bundle id不同的且app图标也不同的新的target的步骤

    方法一: duplicate一个target 修改target配置文件中的bundle id,app icon图标文件位置(必要时重命名app icon文件名),plist文件位置,entitleme ...

  10. echarts-颜色渐变

    图形的颜色. 默认从全局调色盘 option.color 获取颜色 颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 R ...