一、基本概念

在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-*的更多相关文章

  1. h5小功能_classList和自定义属性data

    ###1.classList返回一个对象集 通过obj.classList.add()或obj.classList.remove()可操作对象的class属性值 classList.toggle( ) ...

  2. jQuery缓存数据

    很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> < ...

  3. Bootstrap_Javascript

    弹窗 一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-cont ...

  4. Bootstrap 固定定位(Affix)

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  5. 转载:第二弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿!每日更新!

    今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程.我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志.我已经做好了最坏的准备,就算放弃这份 ...

  6. 我在 impress.js 中学到的小套路

    我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下, ...

  7. Bootstrap_Javascript_固定定位

    Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data- ...

  8. 给js文件传递参数

    一.利用全局变量 这是最简单的一种方式,比如Google Adsense: <script type="text/javascript"> google_ad_clie ...

  9. boostrap插件

    第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...

  10. 两百条微信小程序跳坑指南(不定时更新)

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

随机推荐

  1. Leetcode551.Student Attendance Record I学生出勤记录1

    给定一个字符串来代表一个学生的出勤纪录,这个纪录仅包含以下三个字符: 'A' : Absent,缺勤 'L' : Late,迟到 'P' : Present,到场 如果一个学生的出勤纪录中不超过一个' ...

  2. 威胁快报|ProtonMiner挖矿蠕虫扩大攻击面,加速传播

    背景 近日,阿里云安全监测到一种挖矿蠕虫,正在互联网上加速传播.阿里云安全根据它使用ProtonMail邮箱地址作为矿池用户名的行为,将其命名为ProtonMiner.据分析,这种蠕虫与TrendMi ...

  3. 洛谷 2890 [USACO07OPEN]便宜的回文Cheapest Palindrome

    传送门 一道最简单的区间dp,然而我还是抄了题解. //Twenty #include<algorithm> #include<iostream> #include<cs ...

  4. jnhs解决办法部署错误: 未能启动 Tomcat, 服务器端口 8084 已在使用中。

    当然重启电脑是不可能重启电脑的,这辈子都不会重启电脑 解决方法 1. win + R,输入cmd回车进打开命令行工具 2. 输入 netstat -ano|findstr 8084 查看占用8080端 ...

  5. dede list调用 内容模型 附件

    当我们在list列表页调用内容模型的附件时,会调用出来一个表,数据被包含在表格里面 下面修改这个表格 找到  templets>system>channel_addon.htm文件 < ...

  6. 洛谷P2723 丑数 Humble Numbers [2017年 6月计划 数论07]

    P2723 丑数 Humble Numbers 题目背景 对于一给定的素数集合 S = {p1, p2, ..., pK},考虑一个正整数集合,该集合中任一元素的质因数全部属于S.这个正整数集合包括, ...

  7. CF573E (平衡树)

    CF573E 题意概要 给出一个长度为\(n\)的数列,从中选出一个子序列\(b[1...m]\)(可以为空) 使得\[ \sum_{i=1}^m{b_i*i}\]最大,输出这个最大值. 其中\(n\ ...

  8. tomcat标准化安装

    操作系统说明: 操作系统 版本 linux red hat release 6.4 关键软件包说明: 软件包 版本 目录 运行用户 jdk-7u79-linux-x64.gz 1.7 /usr/loc ...

  9. HR招聘_(九)_招聘方法论(面试环节·薪资谈判和心理把控)

    .薪资谈判 薪资谈判在整个过程中非常重要,如果这一环出现问题前期的所有付出都功亏一篑,无法达成招聘目标. 谈判过程中需要遵循以下原则: 明确 通过面试后需要再次确认候选人的目前薪资和期望,虽然第一次电 ...

  10. arcgis增大缩放级别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...