自定义属性 —— data-*
一、基本概念
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
二、原生js中自定义属性
1,设置自定义属性
设置自定义属性有如下2种方式。
(1)第一种方式是可以直接在 HTML 标签上面书写:
<h2 data-weather="rain">今天天气很好</h2>
上面 data-weather 就是一个自定义属性,值为 rain。
在通过这个方式设置的时候需要注意的是,如果设置的自定义属性是多个单词的组合的话,需要用中横线(-)链接,比如:
<h2 data-birth-date="19940219">今天天气很好</h2>
(2)第二种方式是通过 js 的 dataset 属性来设置:
// html
<h2>今天天气很好</h2> // js
var h2 = document.querySelector('h2');
h2.dataset.weather = "rain";
这样也是设置了一个 data-weater 的自定义属性,值为 rain,HTML5 中元素都会有一个dataset的属性,这是一个 DOMStringMap 类型的键值对集合。
通过这种方式设置同样需要注意,如果设置的是多个单词的组合的话,需要使用驼峰命名法来书写:
// html
<h2>今天天气很好</h2> // js
var h2 = document.querySelector('h2');
h2.dataset.birthDate = "19940219";
2,js读取自定义属性
读取的时候通过dataset属性,使用”.”来获取自定义属性,需要去掉 data- 前缀,连字符需要转化为驼峰命名:
// html(设置)
<h2 data-weather="rain" data-birth-date="19940219">今天天气很好</h2> // js(读取)
var h2 = document.querySelector('h2');
console.log(h2.dataset.weather); // rain
console.log(h2.dataset.birthDate); //
3、css读取自定义属性
也可以通过自定义属性来书写样式:
h3[data-birth-date="19940219"]{
color: red;
}
结果如图:
三、jQuery中的自定义属性
// html
<h3>今天天气很好</h3> // js
//设置
$("h3").data({"weather":"rain", "birth-date": "19940219"});
$("h3").data("birth-date", "rain"); // 读取
console.log($("h3").data("weather")); // rain
console.log($("h3").data("birth-date")); //
自定义属性 —— data-*的更多相关文章
- h5小功能_classList和自定义属性data
###1.classList返回一个对象集 通过obj.classList.add()或obj.classList.remove()可操作对象的class属性值 classList.toggle( ) ...
- jQuery缓存数据
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> < ...
- Bootstrap_Javascript
弹窗 一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-cont ...
- Bootstrap 固定定位(Affix)
来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...
- 转载:第二弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿!每日更新!
今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程.我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志.我已经做好了最坏的准备,就算放弃这份 ...
- 我在 impress.js 中学到的小套路
我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下, ...
- Bootstrap_Javascript_固定定位
Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data- ...
- 给js文件传递参数
一.利用全局变量 这是最简单的一种方式,比如Google Adsense: <script type="text/javascript"> google_ad_clie ...
- boostrap插件
第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
随机推荐
- agc033
A题意:给你个黑白矩阵,每次黑的周围一圈会变黑,求多少次之后全黑.n <= 1000 解:BFS即可. #include <bits/stdc++.h> ; , , -, }; , ...
- vue 安装 fontawesome
查看最新版的fontawesome 信息: https://github.com/FortAwesome/vue-fontawesome 搜索图标 :https://fontawesome.com/i ...
- 揭秘webdriver实现原理【转】
通过研究selenium-webdriver的源码,笔者发现其实webdriver的实现原理并不高深莫测无法揣度.在这里以webdriver ruby binding的firefox-webdrive ...
- 2019.9.17 csp-s模拟测试45 反思总结
来了来了,垃圾二连.[指两次发博客] 看了一下题就匆匆回去上课,在课上一边听课一边水oi,大概用1h40min的时间想完三道题.最后回到机房只剩下40min的时间敲代码,于是T1骗了70分就走了… 这 ...
- mybatis的第一个程序
程序结构图: 表结构: 创表sql: CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varch ...
- LUOGU 2593 : [Zjoi2006] 超级麻将
传送门 解题思路 直接爆搜全T..状态数太多了,所以我们考虑贪心+剪枝.贪心:先拿三个连着的,再拿四个一样的,再拿三个一样的,最后拿两个一样的这样的搜索顺序最优,两个的放最后是因为只要这样的一个,三个 ...
- LUGOU 3959 宝藏 (noip 2017 day2 T2)
传送门 解题思路 去年noip现在拿来写..思路还是听清楚的,记忆化搜索,f[S]表示现在选了集合S时的最小代价,dis[i]表示达到最优时i这个点的深度.f[S| (1< < i-1) ...
- 移动端h5禁用浏览器左滑右滑的前进后退功能
在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致canvas像是重置了一样内容消失,所以需要在代码中处理这种情况. 基本原理就是在touchmove事件中 ...
- oracle-Normal
从shutdown normal命令发布起, 禁止建立任何新的oracle连接. 数据库将等到所有用户都被断开后再继续关闭过程. 等待当前所有已连接的用户断开与数据库的连接
- 【风马一族_php】
原文来自:http://www.cnblogs.com/sows/p/6054383.html (博客园的)风马一族 侵犯版本,后果自负 2016-11-11 15:13:51 回顾 数组:分配 ...