自定义属性 data-*

data-* 属性是 HTML5 中的新属性。是HTML 全局属性。用于存储页面或应用程序的私有定制数据。
ps：（全局属性）
HTML 属性赋予元素意义和语境。可用于任何 HTML 元素。

示例：

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {var animalType = animal.getAttribute("data-animal-type");alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body><h1>物种</h1><p>点击某个物种来查看其类别：</p><ul><li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li><li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>
</ul></body>
</html>

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

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

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

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。

自定义属性好处：

1.自定义属性，可以被js很好的操作

3.存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。通过js的element.dataset.或jQuery的data(’’)拿到，*可以为url等字符

4.框架的数据绑定，例如data-ng-if=“cs==1”

自定义属性 data-*相关推荐

JS获取自定义属性data-*值与dataset
转载自 JS获取自定义属性data值 <body> <div id="tree" data-leaves="47" data-plant- ...
vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...
LinDaiDai的 2019 面试准备
前言最近在掘金上刷到jsliang小伙的一篇文章jsliang 的 2019 面试准备,深受启发,恰巧自己最近也在准备面试,所以趁着此黄金时期写下此文章,做一些前端方面的总结,巩固知识的同时也希望对 ...
Vue(小案例_vue+axios仿手机app)_实现用户评论
一.前言 1.渲染评论列表 2.点击加载按钮,加载更多 3.提交评论二.主要内容 1.评论列表一般是注册到一个全局的公共组件中 2.请求后台数据,渲染评论列表 (1)数据格式如下地址 /ap ...
前端面试知识点目录整理
前端面试知识点目录整理基本功考察 1.关于Html 1.html语义化标签的理解.结构化的理解:能否写出简洁的html结构:SEO优化. 2.h5中新增的属性,如自定义属性data.类名classN ...
多种思路给js文件传递参数
來源:http://www.himm.cn/blog/post/11.html 一.利用全局变量这是最简单的一种方式,比如Google Adsense: <script type=" ...
【专题二】应用号（小程序）开发教程首发第二弹！（0923）
摘要: 应用号(小程序)! 今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程.我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志.我已经做 ...
jsx怎么往js里传参数_给js文件传参数(详解)
一.利用全局变量这是最简单的一种方式,比如Google Adsense: 缺点是引入了全局变量.其中引入文件的方式还有两个变体: // 变体1:用document.write输出 document. ...
component多个 vue_Vue.js之组件（component）
从结构上看,组件之于实例,就好比轮子之于汽车.从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用. 目录: 组件的注册 is的作用 ...
jQuery-实例方法
1.事件 jQuery对DOM事件的监听进行了封装,分为以下三种: 第一种:快捷方法 $('input').click(function () {console.log('this')}) //thi ...

自定义属性 data-*

自定义属性 data-*相关推荐

最新文章

热门文章