JavaScript 自定义属性 data-*使用介绍

更新时间：2023年06月09日 00:56:15 作者：memeflyfly

Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息,读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀

JavaScript 自定义属性 data-*

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

HTML 4.01 与 HTML5 之间的差异

data-* 属性是 HTML5 中的新属性。

语法

属性值

值	描述
somevalue	规定属性的值（以字符串）。

实例

function showDetails(element) {
      var elementType = element.getAttribute("data-type");
      alert(element.innerHTML + "是" + elementType + "属性角色");
    }

  <h1>角色</h1>
  <p>点击某个角色来查看其属性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪卢克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲谢尔</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>

使用dataset属性操作自定义属性

function showDetails(element) {
    var elementType = element.getAttribute("data-type");
    var h3 = document.getElementsByTagName('h3')[0]
    alert(element.innerHTML + "是" + elementType + "属性角色");
    h3.innerHTML = element.dataset.type
  }

<h1>角色</h1>
  <p>点击某个角色来查看其属性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪卢克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲谢尔</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>
  <h3></h3>

在函数中alert语句前添加一行代码，对将被点击的元素的data-type赋值

element.dataset.type = '不知道啥属性'

<h1>角色</h1>
  <p>点击某个角色来查看其属性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪卢克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲谢尔</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>
  <h3></h3>
<script> 
function showDetails(element) {
    var elementType = element.getAttribute("data-type");
    var h3 = document.getElementsByTagName('h3')[0]
	element.dataset.type = '不知道啥属性'
    alert(element.innerHTML + "是" + elementType + "属性角色");
    h3.innerHTML = element.dataset.type
  }
</script>

js获取自定义属性data-

Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。

读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀

<div id="content" data-age="18">12345</div>

var content= document.getElementById('content');
alert(content.dataset.age)
//jquery
$('#content').data('age');//读

字符需要转化为驼峰命名

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

var content= document.getElementById('content');
alert(content.dataset.userList)
//jquery
$('#content').data('userList');//读

到此这篇关于jQuery 获取与设置元素属性的详细方法(看完这篇文章就搞明白了)的文章就介绍到这了,更多相关jQuery 获取与设置元素属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

JavaScript 浮点数运算精度问题
JavaScript小数在做四则运算时，精度会丢失，这会在项目中引起诸多不便，先请看下面脚本。
2009-10-10
JS实现常见的查找、排序、去重算法示例
这篇文章主要介绍了JS实现常见的查找、排序、去重算法,结合实例形式总结分析了JavaScript线性查找、二分查找、递归查找、数组去重、冒泡拍戏、快速排序实现技巧,需要的朋友可以参考下
2018-05-05
JavaScript中reduce()的用法实例
reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值,下面这篇文章主要给大家介绍了关于JavaScript中reduce()的用法实例,需要的朋友可以参考下
2022-05-05
javascript弹出窗口实现代码
这篇文章主要介绍了javascript弹出窗口实现代码，非常人性化的设计，点击页面可以弹出窗口，感兴趣的小伙伴们可以参考一下
2015-11-11
JS中比较冷门但非常好用的方法总结
在Js中有一些比较冷门但是非常好用的方法，我在这里称之为高级方法，这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题，不是所有的浏览器都读得懂的，这篇文章主要就是对这些方法做一个总结，让我们一起来看一下吧
2023-06-06
分享Typescript的13个基础语法
这篇文章主要分享了Typescript的14个基础语法，Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。
2021-12-12
JS排序之快速排序详解
这篇文章主要为大家详细介绍了JS快速排序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
js控制分页打印、打印分页示例
分页打印的实现方法有很多，本文为大家介绍的使用js来完成这个需求，感兴趣的朋友可以参考下
2014-02-02
整理Javascript数组学习笔记
整理Javascript数组学习笔记,之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript数组，希望大家继续关注
2015-11-11
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
这篇文章主要介绍了bootstrap导航栏、下拉菜单、表单的简单应用实例解析,非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-01-01