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.rhkb.cn/news/77391.html

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

相关文章

JavaEE——网络初识 (简单介绍两种协议以及网络通信的基础概念)

文章目录 一、简单了解网络发展二、网络通信基础认识三、利用UDP举例解释网络信息传输 一、简单了解网络发展 总的来讲&#xff0c;网络的发展史就是&#xff0c;先是一小部分的计算机之间连接通信&#xff0c;随着技术发展&#xff0c;逐渐扩大范围&#xff0c;形成了我们当前…

【unity】Pico VR 开发笔记(视角移动)

【unity】Pico VR 开发笔记&#xff08;视角移动&#xff09; 视角移动是简单的基础功能&#xff0c;这里区别于头显定位获得的小范围位移&#xff0c;是长距离不影响安全边界的位移方式。的常见的位移方式有两种&#xff0c;其一是触发后瞬间传送到指定位置&#xff0c;其次是…

TBB库中实现协程(coroutine)的源码说明

源码请见: https://github.com/oneapi-src/oneTBB/blob/master/src/tbb/co_context.h 在windows系统&#xff0c;TBB(也就是intel 的 oneTBB库)&#xff0c;通过windwos fiber(纤程)来实现协程(coroutine)。 创建一个协程,代码很简洁: inline void create_coroutine(corouti…

图论-简明导读

计算机图论是计算机科学中的一个重要分支&#xff0c;它主要研究图的性质和结构&#xff0c;以及如何在计算机上有效地存储、处理和操作这些图。本文将总结计算机图论的核心知识点。 一、基本概念 计算机图论中的基本概念包括图、节点、边等。图是由节点和边构成的数据结构&am…

前端技术搭建五子棋游戏(内含源码)

The sand accumulates to form a pagoda ✨ 写在前面✨ 功能介绍✨ 页面搭建✨ 样式设置✨ 逻辑部分 ✨ 写在前面 上周我们实通过前端基础实现了拼图游戏&#xff0c;今天还是继续按照我们原定的节奏来带领大家完成一个五子棋游戏&#xff0c;功能也比较简单简单&#xff0c;也…

MCUXpresso for VS Code -- 基于VSCode开发RT1176

MCUXpresso for VS Code 是nxp推出插件&#xff0c;旗下MCX LPC, Kinetis和i.MX rt等MCU&#xff0c;都能在VS Code平台进行嵌入式开发。功能框图如下&#xff1a; 前期准备&#xff1a; 软件环境: windows(实际可以跨系统&#xff0c;linux和mac没有测试) VS Code ninja CMa…

elementui Cascader 级联选择使用心得

相信大家对于elementui并不陌生&#xff0c;作为适配Vue的优秀UI框架之一&#xff0c;一直被所有的开发者痛并快乐着。今天要记录的就是里边的主角之一Cascader。 首先先介绍一下Cascader ---> 当一个数据集合有清晰的层级结构时&#xff0c;可通过级联选择器逐级查看并选择…

树莓派安装ubuntu

ubuntu包下载 从ubuntu 官网下载镜像&#xff1a;https://cn.ubuntu.com/blog/build-raspberry-pi-desktop-ubuntu 按个人需求下载&#xff0c;可以首先使用 桌面版22.04 LTS版本&#xff1b; 烧录 从树莓派管官网下载image烧录工具&#xff1a;https://www.raspberrypi.c…

任务15、MidJourney视频(Video)参数动态上线,制作惊艳动画短片

15.1 任务概述 本次任务将帮助你掌握Midjourney中的Video参数,并利用这些参数创作出令人惊艳的绘画作品。通过学习Video参数的基本概念和功能,以及案例的实际应用,你将学会如何正确设置和调整这些参数,从而达到你所期望的绘画效果。最终,你将运用所学知识,生成香奈儿模特…

ensp-单臂路由

ensp-单臂路由 日期&#xff1a;6-26 &#x1f4ce;单臂路由.zip&#x1f4ce;单臂路由.docx

web基础与tomcat环境部署

一. 简述静态网页和动态网页的区别。 请求响应信息&#xff0c;发给客户端进行处理&#xff0c;由浏览器进行解析&#xff0c;显示的页面称为静态页面。处理文件类型如.html、jpg、.gif、.mp4、.swf、.avi、.wmv、.flv等 请求响应信息&#xff0c;发给事务端进行处理&#xff0…

MQTT协议详解「概念、特性、版本及作用」

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输&#xff09;是ISO标准下基于发布/订阅方式的轻量级消息协议。MQTT通常使用TCP / IP&#xff08;传输控制协议/Internet协议&#xff09;作为其传输&#xff0c;但也可以使用其他双向传输。MQ…

【雕爷学编程】MicroPython动手做(33)——物联网之天气预报

天气&#xff08;自然现象&#xff09; 是指某一个地区距离地表较近的大气层在短时间内的具体状态。而天气现象则是指发生在大气中的各种自然现象&#xff0c;即某瞬时内大气中各种气象要素&#xff08;如气温、气压、湿度、风、云、雾、雨、闪、雪、霜、雷、雹、霾等&#xff…

Linux软件安装

软件安装 安装软件的方式 软件的安装方式 二进制发布包安装: 软件已经针对具体平台编译打包发布&#xff0c;只要解压&#xff0c;修改配置即可rpm安装:软件已经按照redhat的包管理规范进行打包&#xff0c;使用rpm命令进行安装&#xff0c;不能自行解决库依赖问题yum安装:一…

uni-app——下拉框多选

一、组件components/my-selectCheckbox.vue <template><view class"uni-stat__select"><span v-if"label" class"uni-label-text">{{label &#xff1a;}}</span><view class"uni-stat-box" :class"…

EventBus 开源库学习(一)

一、概念 EventBus是一款在 Android 开发中使用的发布-订阅事件总线框架&#xff0c;基于观察者模式&#xff0c;将事件的接收者和发送者解耦&#xff0c;简化了组件之间的通信&#xff0c;使用简单、效率高、体积小。 一句话&#xff1a;用于Android组件间通信的。 二、原理…

chrome扩展在popup、background、content之间通信解决传输文件问题

文章目录 背景介绍案例介绍代码示例popup页面&#xff0c;上传文件页面popup页面&#xff0c;js上传代码&#xff0c;file文件转base64background监听消息&#xff0c;base64转file文件&#xff0c;axios上传 附-转base64后直接下载 背景介绍 示例扩展API版本MV2。 以弹…

新增数据自动生成递增排序序号

明确的点 获取序号数组&#xff0c;如果有缺失正整数&#xff0c;则获取最小缺失正整数作为序号 如果没有缺失&#xff0c;则获取序号最大值1作为新的序号 每次生成新序号需要push到序号数组 每次移除数据&#xff0c;需要删除序号数组中对应值的一条记录 1 获取序号数组 //记…

SQL-每日一题【1193. 每月交易 I】

题目 Table: Transactions 编写一个 sql 查询来查找每个月和每个国家/地区的事务数及其总金额、已批准的事务数及其总金额。 以 任意顺序 返回结果表。 查询结果格式如下所示。 示例 1: 解题思路 1.题目要求我们查找每个月和每个国家/地区的事务数及其总金额、已批准的事务数…

Spring Cloud Eureka 和 zookeeper 的区别

CAP理论 在了解eureka和zookeeper区别之前&#xff0c;我们先来了解一下这个知识&#xff0c;cap理论。 1998年的加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式有三个指标。Consistency&#xff0c;Availability&#xff0c;Partition tolerance。简称即为CAP。…