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属性可 ...
随机推荐
- es6基础(7)--函数扩展
{ //有默认值的后面如果有参数必须要有默认值 function test(x,y="world"){ console.log(x,y) } test('hello');//hel ...
- Centos7 开放80,3306端口解决办法
所有扯iptables的文章都是扯淡!!! centos 7 默认防火墙由firewalld来管理!关iptables屁事! 以开放80端口为例,执行以下命令: 开放80端口:firewall-cmd ...
- 性能测试day01_性能基本概念
其实第一次接触性能是15年的时候,懵懵懂懂的被领导拉去做第一次做性能压测,如今有机会重新听一下云层大大讲解性能,于是打算以此博客记录下整个学习的过程,如若有不同意见者可以在下面留言指出,也欢迎大家一起 ...
- vim basic
1.基本用法 1.1.编辑模式 1.2.底行模式 1.3.环境配置 1.4.使用时发现的 2.编辑多个文档 3.选项 1.基本用法 1.1.编辑模式 插入 插入命令 插入位置 i 光标左侧 a 光标右 ...
- android 开发 实现一个进入相机拍照后裁剪图片或者进入相册选中裁剪图片的功能
实现思维路径: 以进入相机拍照的思维路线为例子: 1.进入app 2.判断之前是否保存头像,如果有就显示历史图像 (下面代码中在getOldAvatar();方法中执行这个逻辑) 3.点击更换图像的B ...
- fabric Node SDK进行连接
yum install gcc-c++ npm install --unsafe-perm --registry=https://registry.npm.taobao.org chmod -R
- kafka资料收集
kafka数据可靠性深度解读 http://blog.csdn.net/u013256816/article/details/71091774 kafka性能调优 http://www.kaimin ...
- 《汇编语言 基于x86处理器》第八章高级过程部分的代码 - 两种规范计算数组元素的和
▶ 输入 Count 个 32 位有符号整数,计算他们的和 ● 代码,使用堆栈传参 ;// Sum_main.asm,主过程 INCLUDE Irvine32.inc EXTERN PromptFor ...
- JVM jmap dump 分析dump文件 / 如何使用Eclipse MemoryAnalyzer MAT 排查线上问题
jhat简介 jhat用来分析java堆的命令,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询语言 这个工具并不是想用于应用系统中而是用于"离线" ...
- Mybatis学习5标签:if,where,sql,foreach
包装类:QueryVO.java package pojo; import java.util.ArrayList; import java.util.List; public class Query ...