大佬教程收集整理的这篇文章主要介绍了如何使用HTML5自定义数据属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在本文中,我将向你介绍如何使用HTML5自定义数据属性。我还将向你介绍一些开发人员在工作中经常使用的优秀实例。
很多时候我们需要存储一些与不同DOM元素相关联的信息。这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利。
例如,假设你有一份某个餐饮类网站上所有餐馆的名单。在HTML5之前,如果你想存储餐馆提供的食物种类或餐馆与用户之间的距离等信息,那么你将使用HTML的class
属性。但是如果你还需要存储餐馆的id
以便查看用户想要访问的特定餐厅该怎么办?
我们需要为每个追加的信息向元素中添加一个新class
,这使得解析JavaScript中的数据得到我们所需要的内容变得更加困难。
为了解决这些问题,HTML5引入了自定义数据属性。一个元素上属性名以data-
开头的属性都是数据属性。你也可以使用这些数据属性来给元素设计样式。
接下来,让我们深入了解数据属性的基础知识、学习如何在CSS和JavaScript中访问数据属性的值。
如上所述,data属性的名称始终以data-
开头。以下是一个例子:
<li data-type="veg" data-distance="2miles" data-identifier="10318"> Salad King </li>
你现在可以使用这些数据属性为你的用户搜索和排序餐厅。例如,你现在可以向他们展现在一定距离内的所有素食餐厅。
除了data-
前缀之外,有效的自定义数据属性的名称必须只能包含字母、数字、连字符( - )、点(。)、冒号(:)或下划线(_),不能包含大写字母。
在使用数据属性时,你应该记住下面两个规则:
第一:存储在这些属性中的数据应该是字符串类型。任何可以被编码为字符串类型的东西也可以存储在数据属性中。所有的类型转换都需要使用JavaScript完成。
第二:数据属性应该只在没有其他合适的HTML元素或属性时使用。例如,使用data-class
属性存储元素class
属性的值是不恰当的。
一个元素可以具有任意数量的数据属性,这些数据属性也可以具有任何所需要的值。
你可以根据数据属性使用CSS中的属性选择器来为元素设计样式。你还可以借助attr()
函数将数据属性中存储的信息显示给用户(以工具提示或其他方式)。
现在回到我们餐厅的例子,你可以使用数据属性向用户提供关于餐厅类型或者他们与餐厅之间的距离等信息,或者为餐厅设计不同的背景颜色。以下是一个例子:
lI[data-type='veg'] { BACkground: #8BC34A; } lI[data-type='french'] { BACkground: #3F51B5; }
<h2>Restaurants in New York</h2> <div class="hint"><span class="french"></span><span>French</span></div> <div class="hint"><span class="veg"></span><span>Vegetarian</span></div> <div class="hint"><span class="geRMAN"></span><span>GeRMAN</span></div> <ul> <li data-type="veg" data-distance="2miles" data-identifier="10318">Bloss</li> <li data-type="geRMAN" data-distance="3miles" data-identifier="10318">HEIDelberg</li> <li data-type="french" data-distance="1mile" data-identifier="10318">Daniel</li> <li data-type="veg" data-distance="4miles" data-identifier="10548">Dirt CAndy</li> <li data-type="french" data-distance="3miles" data-identifier="10318">La Grenouille</li> <li data-type="french" data-distance="1mile" data-identifier="10318">Balthazar</li> <li data-type="veg" data-distance="2miles" data-identifier="12315">Angelica Kitchen</li> <li data-type="geRMAN" data-distance="1mile" data-identifier="10318">Blaue Gans</li> <li data-type="geRMAN" data-distance="2miles" data-identifier="12315">ReichenBACh Hall</li> </ul>
CSS代码:
html { font-family: 'Lato'; margin: 20px auto; max-width: 600px; font-size: 1.25em; } ul { list-style: none; padding: 0; } li { padding: 5px 10px; margin: 5px 0; color: white; border-radius: 5px; } .hint { margin-right: 30px; display: inline-block; } span.french,span.veg,span.geRMAN { width: 15px; height: 15px; border-radius: 50%; display: inline-block; float: left; margin-top: 5px; margin-right: 5px; } span.french { BACkground: #3F51B5; } span.veg { BACkground: #8BC34A; } span.geRMAN { BACkground: #bb6666; } lI[data-type='veg'] { BACkground: #8BC34A; } lI[data-type='french'] { BACkground: #3F51B5; } lI[data-type='geRMAN'] { BACkground: #bb6666; }
效果图:
你可以使用工具提示向用户显示一些与元素相关的附加信息。但是因为纯CSS的工具提示不能完全使用,所以我建议你在简单的模型上使用这种方法而不是在一个产品型的网站上。
你要显示的信息可以存储在一个data-tooltip
属性中。
<span data-tooltip="A simple explanation">Word</span>
然后,你可以使用::before
伪元素将数据呈现给用户。
span::before { content: attr(data-tooltip); // 其余的样式规则 } span:hover::before { display: inline-block; }
<p>The gray wolf,also kNown as the <span class="tooltip" data-tooltip="some more information"><span class="tooltip-info">some more information </span>timber wolf</span> or Western wolf,is a canine native to the wilderness and remote areas of Eurasia and <span class="tooltip" data-tooltip="some more information"><span class="tooltip-info">some more information </span>North America</span>. it is the largest extant member of its family,with males averaging 43–45 kg (95–99 lb),and females 36–38.5 kg (79–85 lb). Like the red wolf,it is disTinguished from other <span class="tooltip" data-tooltip="some more information"><span class="tooltip-info">some more information</span>Canis species</span> by its larger size and less pointed features,particularly on the ears and muzzle.</p>
CSS代码:
html { font-family: 'Lato'; margin: 20px auto; line-height: 1.5; max-width: 600px; font-size: 1.25em; } span.tooltip { padding: 0px 5px; position: relative; BACkground: #FFBB99; cursor: pointer; } .tooltip-info { position: absolute; top: -9999px; left: -9999px; } span.tooltip::before { content: attr(data-tooltip); position: absolute; top: 1.5em; font-size: 0.9em; padding: 1px 5px; display: none; color: white; BACkground: rgba(0,0.75); border-radius: 4px; transition: opacity 0.1s ease-out; z-index: 99; text-align: left; } span:hover::before { display: inline-block; }
在JavaScript中有三种方式访问数据属性。
@H_419_82@使用getAttribute和setAttribute你可以使用JavaScript中的getAttribute()
和setAttribute()
来获取和设置不同数据属性的值。
如果给定的属性不存在,该getAttribute
方法将返回null
或一个空字符串。以下是使用这些方法的示例:
var restaurant = document.getElementById("restaurantId"); var ratings = restaurant.getAttribute("data-ratings");
你可以使用该setAttribute
方法修改现有属性的值或添加新属性。
restaurant.setAttribute("data-owner-name","somename");@H_419_82@使用dataset属性
访问数据属性的一种更为简单的方法是借助dataset
属性。此属性返回一个DOMStringMap对象,此对象拥有一个包含所有自定义数据属性的目录。
使用 dataset
属性时,你应该记住下面这些步骤:
将自定义数据属性转换为DOMStringMap
的键值需要三个步骤:
其他字符保持不变。这意味着任何没有被小写字母跟着的连字符也将保持不变。
然后可以使用存储在对象中按照驼峰命名法命名的名称作为键来访问属性,如element.dataset.keyname
。
访问属性的另一种方法是使用括号符号,如 element.dataset[keyname]
。
<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="somename"> Salad King </li>
以下是几个例子:
var restaurant = document.getElementById("restaurantId"); var ratings = restaurant.dataset.ratings; restaurant.dataset.ratings = newrating; var owner = restaurant.dataset['ownerName']; restaurant.dataset['ownerName'] = 'newowner';
现在所有的主流浏览器都@L_262_123@这种方法。相比之前访问自定义数据属性的方法,你应该更喜欢这种方法。
@H_419_82@使用 jQuery你也可以使用jQuery的data()
方法来访问元素的数据属性。在jQuery1.6之前,你必须使用以下代码来访问数据属性:
var restaurant = $("#restaurantId"); var owner = restaurant.data("owner-name"); restaurant.data("owner-name","newName");
从版本1.6开始,jQuery使用驼峰命名法版本的数据属性。现在,你可以使用以下代码来做同样的事情:
var restaurant = $("#restaurantId"); var owner = restaurant.data("ownerName"); restaurant.data("ownerName","newName");
你应该知道,jQuery内部还试图将从数据属性中获取的字符串转换成合适的类型,如数字,布尔值,对象,数组和空值等。
var restaurant = $("#restaurantId"); var identifier = restaurant.data("identifier"); console.log(typeof identifier); // number
如果你希望jQuery以字符串的形式获取属性的值,而不用尝试将其转换为其他类型,则应该使用jQuery的attr()
方法。
jQuery仅在第一次访问时检索数据属性的值。以后不再访问或更改数据属性的值。你对这些属性所做的所有更改都会在内部进行,并且只能使用jQuery访问。
假设你正在操作以下列表项的数据属性:
<li id="salad" data-type="veg" data-distance="2miles" data-identifier="10318"> Salad King </li>
你可以使用以下代码更改其data-distance
属性的值:
var distance = $("#salad").data("distance"); console.log(distancE); // "2miles" $("#salad").data("distance","1.5miles"); console.log(distancE); // "1.5miles" document.getElementById("salad").dataset.distance; // "2miles"
你可以看到,使用普通的JavaScript(不是jQuery)获取属性data-distance
的值返回给我们的一直是旧的结果。
在本教程中,我介绍了HTML5数据属性中你需要了解的所有重要的知识。除了使用属性选择器创建工具提示和样式元素之外,还可以使用数据属性来存储和显示用户一些其他数据,例如一个未读消息的通知等等。
以上是大佬教程为你收集整理的如何使用HTML5自定义数据属性全部内容,希望文章能够帮你解决如何使用HTML5自定义数据属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。