HTML5 data属性
在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属性的更多相关文章
- html5 data属性的使用
html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- js 获取html5的data属性
我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
- HTML data属性简介以及低版本浏览器兼容算法
实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- HTML 5:你必须知道的data属性
原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...
随机推荐
- Mac下RabbitMQ安装和在Java client端的使用
安装: 1.使用homebrew下载rabbitMQ: brew install rabbitmq 执行结果如下: Updating Homebrew... ==> Auto-updated H ...
- [Oracle,2018-01-11] 导出数据库说明文档
select A.table_name,A.column_name,A.data_type,A.DATA_LENGTH,B.comments from user_tab_columns A,user_ ...
- Unity3D的断点调试功能
断点调试功能可谓是程序员必备的功能了.Unity3D支持编写js和c#脚本,但很多人可能不知道,其实Unity3D也能对程序进行断点调 试的.不过这个断点调试功能只限于使用Unity3D自带的Mono ...
- FreeMarker的空值运算符和逻辑运算符
1.空值处理运算符 如果你在模板中使用了变量但是在代码中没有对变量赋值,那么运行生成时会抛出异常.但是有些时候,有的变量确实是null,怎么解决这个问题呢? 判断某变量是否存在:“??” 用法为:va ...
- 1.Hadoop简单理解与总结。
1.什么是Hadoop? Hadoop是一种分布式数据和计算的框架.它很擅长存储大量的半结构化的数据集.数据可以随机存放,所以一个磁盘的失败并不会带来数据丢失.Hadoop也非常擅长分布式计算——快速 ...
- 《算法》第一章部分程序 part 2
▶ 书中第一章部分程序,加上自己补充的代码,包括简单的计时器,链表背包迭代器,表达式计算相关 ● 简单的计时器,分别记录墙上时间和 CPU 时间. package package01; import ...
- Spark面对OOM问题的解决方法及优化总结 (转载)
转载地址: http://blog.csdn.net/yhb315279058/article/details/51035631 Spark中的OOM问题不外乎以下两种情况 map执行中内存溢 ...
- python Requests库网络爬取IP地址归属地的自动查询
#IP地址查询全代码import requestsurl = "http://m.ip138.com/ip.asp?ip="try: r = requests.get(url + ...
- electron 项目的搭建方式,借助 node 和 npm
1,首先确定安装了 node 和 npm 2,创建一个文件夹,如 aa 3,CMD 命令进入到 aa,用 npm 命令初始化一个项目 4, npm -init 根据提示完成配置 5,安装 electr ...
- idea 一款神一样的编辑器 IDEA,破解方式
功能1,可以开发后端如 JAVA, PHP, PYTHON ,NODE 功能2,可以开发前端如 HTML + CSS + JS 破解方式 1,编辑C:\Windows\System32\driver ...