HTML data属性简介以及低版本浏览器兼容算法

最新推荐文章于 2024-04-19 20:47:03 发布

zwwill

最新推荐文章于 2024-04-19 20:47:03 发布

阅读量6.8k

点赞数 1

分类专栏：前端 HTML 文章标签： html data 前端

本文链接：https://blog.csdn.net/willspace/article/details/46859885

版权

本文介绍了HTML5的data-*属性，用于存储页面或应用的自定义数据，提供更好的用户体验。所有主流浏览器均支持。data属性遵循特定语法，允许添加以'data-'开头的自定义属性。在低版本浏览器中，可通过jQuery的.data()方法来读取和操作这些属性，实现兼容性处理。

摘要由CSDN通过智能技术生成

实例

使用 data-* 属性来嵌入自定义数据：

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
支持

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zwwill

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

你不知道的html的16个通用属性

liuhao9999的博客

07-19

540

全局属性全局属性是所有 HTML 元素共有的属性；它们可以用于所有元素，尽管它们可能对某些元素没有影响。可以在所有HTML 元素上指定全局属性，即使是标准中未指定的元素。这意味着任何非标准元素仍必须允许这些属性，即使使用这些元素意味着文档不再符合 HTML5。例如，符合 HTML5 的浏览器会隐藏标记为的内容<foo hidden>...</foo>，即使<foo>它不是有效的 HTML 元素。除了基本的 HTML 全局属性外，还存在以下全局属性：

【html5 data-*属性】

qq_53582888的博客

11-10

454

data-*属性

参与评论您还未登录，请先登录后发表或查看评论

兼容ie低版本获取HTML5自定义属性data-*

Aaron行走在搬砖的路上的博客

04-12

1076

function getDataset(ele){ if(ele.dataset){ return ele.dataset; }else{ var attrs = ele.attributes,//元素的属性集合 dataset = {}, name, matchStr; for(var i = 0;i<attrs.length;i++){ //是否是data- 开头 matchStr = ...

HTML data-*属性的使用思路

来啊快活啊

07-30

1762

<div class="add-address-1 selected" data-addressid="2348" data-province="370000" data-city="370100" data-district="910052" data-address_name="dxm" data-address="舜泰广场" data-zipcode="250014" data-mobile="18888888888"> <div class="border-im

所有html文字换行属性

weixin_45904932的博客

01-05

675

所有html文字换行属性1.white-space2.中英文截断 1.white-space 2.中英文截断

gm-crypto:与Node.js和浏览器兼容的GMT系列（sm2，sm3，sm4）加密算法的纯JavaScript实现

05-03

GM / T系列加密算法的纯JavaScript实现，用于Node.js和浏览器，并支持类型声明文件。快速开始安装使用npm： $ npm install gm-crypto 使用纱： $ yarn add gm-crypto 基本用法 SM2 基于椭圆曲线的公钥密码...

关于Chrome浏览器升级到80版本后受影响的场景以及解决方案(1)

最新发布

2401_84049200的博客

04-19

1037

分享一些资料给大家，我觉得这些都是很有用的东西，大家也可以跟着来学习，查漏补缺。《Java高级面试》《Java高级架构知识》《算法知识》《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！11591)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

datian45678的博客

06-22

1624

整理了一些前端面试题，希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大，主要针对初中级前端开发工程师。篇幅过长，大家可以先点赞收藏以后慢慢看。关于HTML 的title和alt属性有什么区别 alt：图片加载失败时，显示在网页上的替代文字 title：鼠标（手机端该属性无意义）放在图片上时显示的文字 alt是必需属性（但属性值可为空），title非必需图片懒加载的原理图像是img标记，浏览器根据图像的src属性请求图像，因此惰性加载的关键是当图像不在可视区域时，不给`imgs‘赋值。懒加载

灵活运用CSS开发技巧（转载）

xuehu837769474的博客

02-24

1461

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物...

data-id 和 id 的区别 data-id 的样式写法

热门推荐

qq_41648132的博客

05-18

4万+

id是选择器data-id只是行内存放数据的一个标签，跟input里面的value作用是一样的同时在HTML5 中增加了一项新功能是自定义数据属性，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。例如：<style type="text/css"> div[data-id="something"]...

2013年度最新整理45个div+css兼容性问题与解决方案

赠人玫瑰,手留余香.

03-01

848

1. 默认的内外边距不同问题：各个浏览器默认的内外边距不同解决： *{margin:0;padding:0;} 2. 水平居中的问题问题：设置 text-align: center ie6-7文本居中，嵌套的块元素也会居中 ff /opera /safari /ie8文本会居中，嵌套块不会居中解决：块元素设置 1、margin-left:auto

html页面中 dateFormat的使用

qq_39822451的博客

05-09

3073

<div class="col-sm-8"> <label style="text-align:left">${beanName.meterReadDate!,dateFormat="yyyy-MM-dd"}</label> </div>

dataset 兼容IE

qq_37487141的博客

12-19

388

将 dataset 改为 getAttribute、setAttribute // 获取 event.target.dataset.xxx event.target.getAttribute('xxx') // 设置 event.target.dataset.xxx = xxx event.target.setAttribute('xxx', xxx)

innerHTML,innerText,value的区别(实例)

fourinches的博客

08-06

5271

1. 获取标签的内容 innerHTML识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 [高版本的浏览器会将格式原样打印]; innerText 不识别标签, 在获取标签内容时去除所有标签 value获取标签的value属性值实例如下: 解析: (1) 控制台的打印内容中, 第一段(以虚线划分) 使用innerHTML获取到<div&g...

HTML中关于data-自定义属性的使用

foryond的专栏

08-12

2099

在 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <

html data-属性jquery,html5的自定义data-*属性与jquery的data()方法的使用在

weixin_30453651的博客

06-05

231

jquery怎么设置data的值jquery怎么获得元素data属性值jQuery获取方法 data()方法 //HTML代码 //获取属性var appid = $("#myDiv").data("appid"); //123var app-id = $("#myDiv").data("app-id"); //456 //属性赋值 $("#myDiv").data("appid","666");...

HTML data-* 属性（自定义属性）

努力努力再努力的博客

07-15

605

HTML data-* 属性 data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 data-* 属性包括两部分：属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符属性值可以是任意字符串注： data-* 属性是 HTML5 中的新属性。示例： <!DOCTYPE html> <html> <head> <script>

鼠标点击触发，HTML5 Canvas 实现视频破碎重组动画

- 使用`<video>`标签嵌入视频资源，设置自动播放和循环播放功能，如`<video id="sourcevid" autoplay="true" loop="true">`，并提供不同格式的视频源以兼容不同的浏览器。 - 创建一个`<canvas>`元素，用于复制视频...