HTML5中的data-*属性

介绍:

data-*全局属性是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力。

 data-*的使用

<div class="child" data-name="小红" data-age="18"></div>

在js里有两种获取方法:

第一种

var dataset = document.getElementsByClassName('child')[0].dataset;

 

 

第二种:

document.getElementsByClassName('child')[0].getAttribute('data-name');

 setAttribute()修改属性值:

var dom = document.getElementsByClassName('child')[0];
console.log(dom.dataset);
dom.setAttribute('data-name', '小明')
console.log(dom.dataset);

 

css中使用: 

使用属性选择器

.child[data-age='18'] {color: red;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/23033.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javaScript 树形结构 递归查询方法。

1. 函数递归定义 程序调用自身的编程技巧称为递归&#xff08; recursion&#xff09;。 2.使用条件 1.存在限制条件&#xff0c;当满足这个限制条件的时候&#xff0c;递归便不再继续。 2.每次递归调用之后越来越接近这个限制条件。 3.既然是自己调用自己&#xff0c;那么整个…

【问题解决】mysql 数据库字符串分割之后多行输出方法

背景&#xff1a; 项目需要从一张表查询出来数据插入到另一张表&#xff0c;其中有一个字段是用逗号分隔的字符串&#xff0c;需要多行输入到另一张表&#xff0c;那么这个如何实现呢 方案&#xff1a; 下面先粘贴下sql语句&#xff1a; select SUBSTRING_INDEX(SUBSTRING_…

选数(c++题解)

题目描述 已知 n 个整数 x1​,x2​,⋯,xn​&#xff0c;以及 1 个整数 kk&#xff08;k<nk<n&#xff09;。从 nn 个整数中任选 kk 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4&#xff0c;k3&#xff0c;4 个整数分别为 3,7,12,19 时&#xff0c;可得全部的…

【办公自动化】使用Python一键提取PDF中的表格到Excel(文末送书5本)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项

一、实际工作中需要对转换选项细化内容 在昨天我们实现了最简单的半角字符和全角字符相互转换功能&#xff0c;就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。 在实际工作中&#xff0c;我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换&a…

用Rust实现23种设计模式之建造者模式

当使用 Rust 实现建造者模式时&#xff0c;我们可以通过结构体和方法链来实现。建造者模式是一种创建型设计模式&#xff0c;它允许你按照特定的顺序构建复杂对象&#xff0c;同时使你能够灵活地构建不同的变体。下面是一个使用 Rust 实现建造者模式的示例&#xff0c; 在示例中…

python中计算2的32次方减1,python怎么算2的3次方

大家好&#xff0c;给大家分享一下怎么样用python编写2的n次方,n由键盘输入&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; ---恢复内容开始--- 1、内置函数&#xff1a;取绝对值函数abs() 2、内置函数&#xff1a;取最大值max()&#xff…

JAVA-@Configuration注解属性proxyBeanMethods

Configuration注释中的proxyBeanMethods参数是springboot1.0&#xff0c;升级到springboot2.0之后新增的比较重要的内容&#xff0c;该参数是用来代理bean的。 理论 首先引出两个概念&#xff1a;Full 全模式&#xff0c;Lite 轻量级模式 Full(proxyBeanMethods true) :pro…

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …

Socks IP轮换:为什么是数据挖掘和Web爬取的最佳选择?

在数据挖掘和Web爬取的过程中&#xff0c;IP轮换是一个非常重要的概念。数据挖掘和Web爬取需要从多个网站或来源获取数据&#xff0c;而这些网站通常会对来自同一IP地址的请求进行限制或封锁。为了避免这些问题&#xff0c;数据挖掘和Web爬取过程中需要使用Socks IP轮换技术。在…

css实现,正常情况下div从左到右一次排列,宽度超出时,右侧最后一个div固定住,左侧其他div滚动

需求:正常情况下 宽度超出时: 实现: <templete><div class"jieduanbox"><div v-for"(item, index) in stageList" :key"index" style"display: inline-block">.......</div><div class"rightBtn&q…

ATF(TF-A)安全通告

目录计划如下&#xff0c;相关内容补充中&#xff0c;待完成后进行超链接&#xff0c;敬请期待&#xff0c;欢迎关注 1、Advisory TFV-1 (CVE-2016-10319) 2、Advisory TFV-2 (CVE-2017-7564) 3、Advisory TFV-3 (CVE-2017-7563) 4、Advisory TFV-4 (CVE-2017-9607) 5、Adviso…

Docker root用户的pip使用方法

Docker下root用户 pip install XX 显示pip命令不存在 # 原始目标&#xff1a;pip install XX pip install --root-user-actionignore 【XX】# (要安装的包)参考&#xff1a;WARNING: Running pip as the ‘root‘ user can result in broken permissions Linux 中 root 与 su…

【Python:json常用函数,用于加载和保存json文件】load(), loads(), dump(), dumps()

文章目录 1、load()2、loads()3、dump()4、dumps() json文件为javascript object Notation文件&#xff0c;属于轻量级的数据交换格式&#xff0c;可以用于存储和交换数据。json文件是由类似{ }的key-value映射组成。 1、load() 把json文件加载为Python的数据格式&#xff0c…

“科创中国”青百会轮值主席吴甜:以大语言模型为代表的AI将引发产业变革

8月1日&#xff0c;“科创中国”青年百人会&#xff08;后文简称青百会&#xff09;联合百度举办“青创汇”高端对话&#xff0c;围绕人工智能技术创新与产业发展交流研讨&#xff0c;同时正式成立“科创中国”青年百人会女性工作委员会。该委员会将鼓励更多女性投身科技创新事…

供水管网漏损监测,24小时保障城市供水安全

供水管网作为城市生命线重要组成部分&#xff0c;其安全运行是城市建设和人民生活的基本保障。随着我国社会经济的快速发展和城市化进程的加快&#xff0c;城市供水管网的建设规模日益增长。然而&#xff0c;由于管网老化、外力破坏和不当维护等因素导致的供水管网漏损&#xf…

算法与数据结构(五)--树【1】树与二叉树是什么

一.树的定义 树是一个具有层次结构的集合&#xff0c;是由一个有限集和集合上定义的一种层次结构关系构成的。不同于线性表&#xff0c;树并不是线性的&#xff0c;而是有分支的。 树&#xff08;Tree&#xff09;是n&#xff08;n>0&#xff09;个结点的有限集。 若n0&…

Stephen Wolfram:机器学习与神经网络训练

Machine Learning, and the Training of Neural Nets 机器学习与神经网络训练 We’ve been talking so far about neural nets that “already know” how to do particular tasks. But what makes neural nets so useful (presumably also in brains) is that not only can t…

测试人员简单使用Jenkins

一、测试人员使用jenkins干什么&#xff1f; 部署测试环境 二、相关配置说明 一般由开发人员进行具体配置 1.Repository URL&#xff1a;填写git地址 2.填写开发分支&#xff0c;测试人员可通过相应分支进行测试环境的构建部署 当多个版本并行时&#xff0c;开发人员可以通过…

国家金融监督管理总局明确将数据安全管理纳入操作风险管理范畴

为进一步完善银行保险机构操作风险监管规则&#xff0c;提升银行保险机构的操作风险管理水平&#xff0c;国家金融监督管理总局起草了《银行保险机构操作风险管理办法&#xff08;征求意见稿&#xff09;》&#xff08;以下简称《办法》&#xff09;&#xff0c;现向社会公开征…