为什么要在标签上使用data-, 它有什么好处

最新推荐文章于 2023-02-22 20:05:48 发布
最新推荐文章于 2023-02-22 20:05:48 发布
阅读量775 收藏 1
点赞数
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42693712/article/details/108040114
版权

为什么要在标签上使用data-, 它有什么好处

1html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息
2使用getAttribute（）方法以及setAttribute()方法操作自定义属性
3使用dataset操作自定义属性。
4dataset属性的兼容性问题，Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera11.10+ Safari 6+ 以上浏览器均能很好支持
5使用data-属性选择器好处：绑定DOM强相关数据，js传递数据
highfish920
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html标签属性中加data,巧用 HTML5 data 属性
weixin_42298373的博客
05-31 1446
kea-socket-tr-fs8.png巧用 HTML5 data 属性HTML 5 之前，需要使用其他的数据时，是非常糟糕的。为了使一切正常有效，你不得不将数据填充到 rel 或 class 属性。有些开发者，甚至创建自己的自定义属性。自从 HTML5 自定义 data 属性出现，你可以存储任意数据，通过一种简单，符合标准的方式。1、如何使用 data 属性呢？一个 data 属性，本质就是：...
使用data-的好处
碉堡飞哥的博客
08-14 2076
data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分： 语法 <element data-*="somevalue"> ...
简述data-属性的用法(如何设置，如何获取),有何优势？
m0_51958500的博客
02-22 3812
简述data-属性的用法(如何设置，如何获取),有何优势？
js: 获取标签元素data-*属性值的方法
彭世瑜的博客
05-23 5859
标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 <style> #user::before { content: attr(data-id); } #user::after { content: attr(data-user-name); } </style> <div id="user" data-id="666" data-user-name="Tom"></div> 方式
HTML5 自定义属性 data-* 的应用方法 详解
Internet情缘。
10-22 634
转自：http://blog.netsh.org/posts/html-data-jquery_1812.netsh.html 新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据...
DarkModeToggle:使用html标签的data-theme属性切换主题
05-06
黑暗模式切换在CSS中，元素的颜色是使用预定义的变量设置的。 每个主题本质上只是这些变量的一组不同的值。 在CSS html[data-theme="dark"]中声明了不同的主题。 在这里，切换键用于更改主题。 可以使用任何其他输入...
在Vue中获取自定义属性方法:data-id的实例
12-28
第一步：首先在标签上绑定上@click=”getDateId（item.id）”,并将属性值传到绑定的事件里面 第二步：在标签上继续绑定：date-id = “item.id”属性 第三步：在[removed]里面的属性methods里面添写上事件函数 ...
Bootstrap中data-target 到底是什么
12-11
我目前理解到在bootstrap中data-target，data-toggle等属性主要有两种作用： 【1.】在CSS中作标签选择器用。 如： [data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > ....
vue 出现data-v-xxx的原因及解决
10-15
当我们在Vue组件的 `<style>` 标签中使用 `scoped` 属性时，Vue会自动生成类似 `data-v-xxx` 的数据属性，并将其添加到组件模板中的所有元素上。 例如，如果我们有一个Vue组件： ```html <div class="list-...
html5自定义属性data详解及使用方法
nuanxiasuiyuan的博客
07-03 1566
以下面的html作为案列：获取data-属性：<ul> <li class="first" data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>通过js的getAttribute(
html中data-属性作用,html中的data-*的用法和作用 自定义属性
weixin_39559486的博客
06-04 3625
定义和用法**data- *** 属性用于存储私有页面后应用的自定义数据。**data- *** 属性可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。**data- *** 属性由以下两部分组成：属性名不要包含大写字母，在 data- 后必须至少有一个字符。该属性可以是任何字符串注意： 自定义属性前缀 "data-" ...
html data自定义属性,HTML中data自定义属性的使用和插件应用介绍
weixin_34050521的博客
06-07 434
大家可能会经常看到一些HTML里都带有data属性，这些都是HTML5的自定义属性，可以做很多事情，直接调用JS十分方便，虽然是HTML5的属性，但好在jQuery通用的，所以基本在所有浏览器里都是可以正常使用的，包括低版本的IE。下面为大家简单介绍一下使用方法：1、简单使用复制代码代码如下:复制代码代码如下:$(function(){var _widget= $("#widget").attr(...
html5标签的data-*属性用法简单介绍
weixin_34409703的博客
03-01 664
此属性是html5新增的属性。使用它可以存储用户自定的属性。 使用javascript可以访问这些自定义的属性。 语法结构: 1 <element data-*="somevalue"> 语法规范如下: 1.属性名称不能够有大写字母。 2.属性名称分为两个部分，"data-"是固定的前缀，后面是任意合法的...
html 标签data-*
计算机技术大学习
08-31 806
html中的标签带一些数据 例如 菊花台 这个标签中就带了一些数据，如作者，长度等...你想要加入的一些数据 在jquery中的用法： $('.author').click(function(){ var author = $(this).attr('data-author'); //这就获取了标签中之前设定的author了 }); 些的比较简单，如有不明白
vue如何在style标签中使用data响应式数据？
韩旭的博客
05-19 6759
文章目录一、面临到的需求？二、如何在css中使用变量？三、vue如何在style标签中使用data响应式数据？ 一、面临到的需求？ 首先我们知道css对应是有伪类的，如:hover, :active 等等。 我们需要想的是如何获取到这个对应的dom节点的伪类然后将对应的伪类，通过js的方式进行变更呢？ 我们要知道的是，此种如:hover是不引用元素的，而是引用任何满足样式表规则条件的元素。 我们直接通过获取dom节点，然后变更里面的样式是行不通的。 此时我们就需要用到一个api CSSStyleDecla
vue中为什么把数据放在data当中
CSDNchaxundaima的博客
10-30 1801
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 vue中为什么把数据放在data当中data的作用 vue的核心是数据驱动与组件化，数据驱动的背后是数据劫持与观察者模式 数据劫持通过object.defineProperty方法将原生js代码注入到vue当中作为data的选项，然后遍历产生setter与getter，其目的是为了更好的感知数据的变化 data可以理解为发布源，这样其data当中的数据发生改变时，其他用到data数据的地方也会跟着改变，（发布订阅者模式，也就是观察者模式，一
html中data-属性作用,HTML data-, 属性
weixin_39762856的博客
06-04 719
HTML data-* 属性HTML 全局属性实例使用 data-* 属性来嵌入自定义数据：Owldata-animal-type="fish">Salmon data-animal-type="spider">Tarantula 浏览器支持所有主流浏览器都支持 data-* 属性。定义和用法data-* 属性用于存储私有页面后应用的自定义数据。data-* 属性可以在所有的 HTML...
html 新增的data-属性,关于html标签元素的data-*属性
weixin_39528029的博客
06-04 961
关于这个主题的文章和博客其实已经非常多了，这里并非要重复造轮子，只是看到一些例子稍微有点麻烦，其实也很简单，但是对于一个刚刚入门的人，w3c的例子甚至可能看不懂，这里列出一个最简单不过的小案例以供参考大牛自然略过，不吝指教代码如下Html5 custom data attribute Testvar user = document.getElementsByTagName("div")[0];if...
div 标签上 绑定 data-type 点击时 怎么获取到 data-type 值 代码是咧
最新发布
05-24
在上面的代码中，我们首先使用 `document.querySelector` 方法获取到 `div` 元素，并且给它添加了一个点击事件。当点击 `div` 元素时，我们使用 `getAttribute` 方法获取到 `data-type` 属性的值，并且将它打印到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值