关于html标签元素的data-*属性

关于这个主题的文章和博客其实已经非常多了,这里并非要重复造轮子,只是看到一些例子稍微有点麻烦,其实也很简单,但是对于一个刚刚入门的人,w3c的例子甚至可能看不懂,这里列出一个最简单不过的小案例以供参考

大牛自然略过,不吝指教

代码如下

 1 <html>
 2 <head>
 3     <title>Html5 custom data attribute Test</title>
 4 </head>
 5 <body >
 6    <div class="user" data-name="xiaoan"></div>
 7  <script type="text/javascript">
 8       var user = document.getElementsByTagName("div")[0];
 9       if(isIe()){
//如果是ie浏览器这样调用
10 alert(user.getAttribute('data-name')); 11 } 12 else{
//非ie浏览器调用方法
13 alert(user.dataset['name']); 14 } 15 //判断是否是ie,但是在ie10 或者ie11下,实际检测出来的效果是false,这里稍微注意一下即可 16 function isIe(){ 17 return window.ActiveXObject ? true : false; 18 } 19 </script> 20 </body> 21 </html>

这足够简单了吧,

1.定义一个div标签,一个属性叫做data-name,  data-  是固定的,后面的随意

2.根据浏览器弹出这个属性的值

 

转载于:https://www.cnblogs.com/azhw/p/4457198.html

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

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

相关文章

使用预训练模型进行句对分类(Paddle、PyTorch)

文章目录1. Paddle2. PyTorch3. 提交结果分别使用两种框架&#xff0c;加载预训练模型&#xff0c;对句对进行分类 数据下载&#xff1a;千言数据集&#xff1a;文本相似度 1. Paddle 可以使用 paddlenlp 直接加载预训练模型&#xff0c;比较方便 # %% # 比赛地址 # https…

python将元祖设为整形_python基础(5)---整型、字符串、列表、元组、字典内置方法和文件操作介绍...

对于python而言&#xff0c;一切事物都是对象&#xff0c;对象是基于类创建的&#xff0c;对象继承了类的属性&#xff0c;方法等特性1.int首先&#xff0c;我们来查看下int包含了哪些函数#python3.xdir(int)#[__abs__, __add__, __and__, __bool__, __ceil__, __class__, __de…

mysql1033错误存储引擎_MySQL Innodb存储引擎因为缓存配置出现的错误

引用100920 10:50:21 mysqld_safe Starting mysqld daemon with databases from /byread/dataInnoDB: The InnoDB memory heap is disabledInnoDB: Mutexes and rw_locks use GCC atomic builtinsInnoDB: mmap(11010048000 bytes) failed; errno 12InnoDB: Fatal error: cannot…

《你的灯亮着吗》 读书笔记三

紧接《你的灯亮着吗》读书笔记二 4、这是谁的问题&#xff1f; 当别人可以妥善解决自己的问题时&#xff0c;不要越俎代庖&#xff0c;如果这是他们的麻烦&#xff0c;就让它成为他们的麻烦&#xff0c;如果一个人处于解决问题的位置&#xff0c;却并不受问题困扰&#xff0c;那…

LeetCode 1913. 两个数对之间的最大乘积差

文章目录1. 题目2. 解题1. 题目 两个数对 (a, b) 和 (c, d) 之间的 乘积差 定义为 (a * b) - (c * d) 。 例如&#xff0c;(5, 6) 和 (2, 7) 之间的乘积差是 (5 * 6) - (2 * 7) 16 。 给你一个整数数组 nums &#xff0c;选出四个 不同的 下标 w、x、y 和 z &#xff0c;使数…

PHP和MySQL开发WordPress_wordpress是什么开发的

wordpress是什么开发的&#xff1f;WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。截至2018年4月&#xff0c;排名前1000万的网站超过30.6%使用WordPress。WordPress是最受欢迎的网站内容管理系统。WordPress是目前…

python 数据平滑_数据平滑方法的原理和应用

一、简介在实际的工程应用中&#xff0c;经常会遇到初始结果噪声太多的问题&#xff0c;比如信号强度抖动的太厉害&#xff0c;比如视频流中的bbox抖动的太厉害&#xff0c;比如光谱信号抖动的太厉害等等&#xff0c;这时候就需要一些简单的滑动平均算法。滑动平均其实是一个很…

LeetCode 1920. 基于排列构建数组

文章目录1. 题目2. 解题1. 题目 给你一个 从 0 开始的排列 nums&#xff08;下标也从 0 开始&#xff09;。 请你构建一个 同样长度 的数组 ans &#xff0c;其中&#xff0c;对于每个 i&#xff08;0 < i < nums.length&#xff09;&#xff0c;都满足 ans[i] nums[nu…

程序员职业生涯的11个阶段程序人生

程序员的职业生涯是一段充满起伏的有趣经历。考虑到其陡峭的学习曲线&#xff0c;完全可以预见你将经历挫折、启蒙、骄傲自大这几个时期&#xff0c;以及穿插其间的各种心路历程。在这篇文章中让我们轻松一下&#xff0c;在作者诙谐的语言中来回顾这11个阶段&#xff1a; 阶段1…

unity python_Unity引擎内嵌python

Unity脚本using System.Collections;using System;using System.Collections.Generic;using UnityEngine;using System.Diagnostics; //需要添加这个名词空间&#xff0c;调用DataReceivedEventArgpublic class LoadPython : MonoBehaviour{string sArguments "UnityLoad…

LeetCode 1922. 统计好数字的数目(快速幂)

文章目录1. 题目2. 解题1. 题目 我们称一个数字字符串是 好数字 当它满足&#xff08;下标从 0 开始&#xff09;偶数 下标处的数字为 偶数 且 奇数 下标处的数字为 质数 &#xff08;2&#xff0c;3&#xff0c;5 或 7&#xff09;。 比方说&#xff0c;“2582” 是好数字&a…

《人性的弱点》

卡耐基-《人性的弱点》&#xff0c;讲做人要平和、真诚&#xff0c;沟通的成功在于尽量避免争辩&#xff0c;最常见的情况是在争辩中取得了胜利却失去了成功的机会。这本书适合长时间的品味&#xff0c;以至自觉地养成良好的习惯以及卓越的品格。没有什么励志书是可以让你一下子…

crc java_java实现CRC16 MODBUS校验算法

/*** 查表法计算CRC16校验**paramdata 需要计算的字节数组*/public static String getCRC3(byte[] data) {byte[] crc16_h {(byte) 0x00, (byte) 0xC1, (byte) 0x81, (byte) 0x40, (byte) 0x01, (byte) 0xC0, (byte) 0x80, (byte) 0x41, (byte) 0x01, (byte) 0xC0, (byte) 0x80…

python图片隐写_CTF 图像隐写Python脚本处理

CTF中经常会遇到很多图片的隐写题目需要使用脚本来解题&#xff0c;最常用到的就是使用python中的PIL库&#xff0c;所以如果要更好的解出图片隐写相关处理的题目&#xff0c;掌握好这个库的使用是必要的。本期就来给大家介绍下这个库的基本使用和几道图片题目的解题思路。0x00…

LeetCode 1933. 判断字符串是否可分解为值均等的子串

文章目录1. 题目2. 解题1. 题目 一个字符串的所有字符都是一样的&#xff0c;被称作等值字符串。 举例&#xff0c;"1111" 和 "33" 就是等值字符串。 相比之下&#xff0c;"123"就不是等值字符串。 规则&#xff1a;给出一个数字字符串s&…

java 资源锁定_如何在Java中创建时正确锁定资源

也许ConcurrentHashMap可以帮到你.顾名思义,它支持并发修改.要只创建一个新元素,您可以执行以下操作&#xff1a;private Map map new ConcurrentHashMap<>();private final Object lock new Object();public Thing getById(String id) {Thing t map.get(id);if (t n…

pythonb超分辨成像_深度原理与框架-图像超分辨重构-tensorlayer

图像超分辨重构的原理&#xff0c;输入一张像素点少&#xff0c;像素较低的图像&#xff0c; 输出一张像素点多&#xff0c;像素较高的图像而在作者的文章中&#xff0c;作者使用downsample_up, 使用imresize(img, []) 将图像的像素从原理的384&#xff0c;384降低到96&#xf…

LeetCode 1921. 消灭怪物的最大数量(排序)

文章目录1. 题目2. 解题1. 题目 你正在玩一款电子游戏&#xff0c;在游戏中你需要保护城市免受怪物侵袭。 给你一个 下标从 0 开始 且长度为 n 的整数数组 dist &#xff0c;其中 dist[i] 是第 i 个怪物与城市的 初始距离&#xff08;单位&#xff1a;米&#xff09;。 怪物以…

软件测试课程学习总结

一、知识结构 介绍&#xff1a; 1.Definition of Software testing: Software testing is any activity aimed at evaluating an attribute or capability of a program or system and determining that it meets its required results Software Testing is an empirical&#…

java listutils_Java的list自定义工具类ListUtils

/*** 将list中map的key为ID的值作为KEY在套一层*/public static Map> keyToID(List> datalist) {Map> res new HashMap>();for (Map map : datalist) {String id map.get("ID");res.put(id, map);}return res;}/*** 移除List中所有Map的某个元素** par…