在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. day6需要记忆(元组字典集合)

    一:基本使用:(元组 tuple)优先掌握的操作1.按索引取值(正向取+反向取):只能取2.切片(顾头不顾尾,步长)3.长度  len()4.成员运算in和not in5.循环需要掌握的操作1.cou ...

  2. MySQL 中的三中循环 while loop repeat 的基本用法

    -- MySQL中的三中循环 while . loop .repeat 求 1-n 的和 -- 第一种 while 循环 -- 求 1-n 的和 /* while循环语法: while 条件 DO 循 ...

  3. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  4. 【Git使用】sourcetree跳过注册的方法(转)

    当前只有Win的版本,Mac自行百度(笑) 很多人用git命令行不熟练,那么可以尝试使用sourcetree进行操作. 然鹅~~sourcetree又一个比较严肃的问题就是,很多人不会跳过注册或者操作 ...

  5. 操作笔记:tomcat在正式环境的常见问题和idea的远程调试

    1,一台服务器有两个容器,比如:jetty,tomcat. 出现问题: jetty启动的时候,tomcat就不能启动了. 此时,需要修改tomcat的配置文件:servler.xml <?xml ...

  6. 20165205 2017-2018-2 《Java程序设计》 第二周学习总结

    20165205 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 学习第二章知识(标识符,关键字,数据类型,输入.输出数据和数组) 学习第三章知识(运算符,基 ...

  7. [Unity动画]03.动画事件

    1.找到动画,添加动画事件 2.在脚本中添加回调方法 TestAnimator.cs using UnityEngine; public class TestAnimator : MonoBehavi ...

  8. Object-c基本语法

    // //  main.m //  OCbasic1 // //  Created by apple on 14-8-5. //  Copyright (c) 2014年 苹果IOS软件开发者. Al ...

  9. 38.spiderkeeper的配置

    配置spiderkeeper管理scrapy爬虫 1.安装所需文件包pip install spiderkeeper pip install scrapyd pip install scrapy_cl ...

  10. 1. apache如何启动

    进入apache安装目录/bin/底下,用命令:./apachectl start 启动