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属性可 ...
随机推荐
- vue2.0 slot用法
学习vue.js也有一段时间了,关于slot这一块,也看了不少次了,总感觉有点迷迷糊糊,不知其然也不知其所以然,抽出一段完整的时间,再一次仔细学习.稍微有点理解了,在此稍作记录,好记性不如烂笔头嘛! ...
- jq中工作中用到的一些方法总结
1.css : 1.判断:hasClass() 2.添加:addClass() 3.移除:removeClass() 2选择器: 1.获取指定上级 $(this).closest ...
- spring揭密学习笔记(3)-spring ioc容器:Spring的IoC容器之BeanFactory
1. Spring的IoC容器和IoC Service Provider的关系 Spring的IoC容器和IoC Service Provider所提供的服务之间存在一定的交集,二者的关系如图4-1所 ...
- ORACLE 归档日志打开关闭方法
一 设置为归档方式 1 sql> archive log list; #查看是不是归档方式 2 sql> alter system set log_archive_start=true ...
- Ruby学习笔记6: 动态web app的建立(3)--多Model之间的交互
We first built a static site which displayed a static image using only a Controller and a View. This ...
- MYeclipse 和 flex 环境配置
1安卓JDK 运行 jdk-6u27-windows-i586 安装于 d:/programe/java,注意JRE和JDK安装在一起 测试是否安装成功,运行,CMD,javac 回车.或者java ...
- 转载:return *this和return this
文章出处,感谢分享http://blog.csdn.net/stpeace/article/details/22220777 别跟我说, return *this返回当前对象, return this ...
- C# IIS 服务器上传图片500解决办法
- ln: 创建符号链接 "/usr/bin/java": 文件已存在
执行下述命令创建软链接 #ln -s $JAVA_HOME/bin/java /usr/bin/java 出现下述错误提示: ln: 创建符号链接 "/usr/bin/java": ...
- 一、Jmeter环境介绍
1.安装 从Apache网站http://jmeter.apache.org/download_jmeter.cgi下载二进制包. .tgz后缀名的为Linux使用的包 .zip后缀的为windows ...