如何使用HTML5自定义数据属性

时间：2023-04-02 15:23:50 HTML

在本文中，我将向您展示如何使用HTML5自定义数据属性。我还将向您介绍开发人员在工作中经常使用的一些很好的示例。为什么需要自定义数据属性？很多时候我们需要存储一些与不同DOM元素关联的信息。读者可能不需要这些信息，但是能够轻松访问这些信息将极大地方便我们开发人员的工作。例如，假设您在餐厅相关网站上有一份所有餐厅的列表。在HTML5之前，如果您想存储餐厅提供的食物类型或餐厅与用户之间的距离等信息，则可以使用HTML类属性。但是，如果您还需要存储餐厅的ID以便查看用户想要访问的特定餐厅怎么办？下面是基于HTMLclass属性的方法存在的一些问题：HTMLclass属性并不是为了存储这样的数据，它的主要目的是让开发人员可以将样式信息添加到一组元素中。我们需要为每个额外的信息向元素添加一个新的类，这使得在JavaScript中解析数据以获取我们需要的内容变得更加困难。假设给定的类名以数字开头。如果您决定稍后根据类名设置元素样式，则必须避开数字或在样式表中使用属性选择器。为了解决这些问题，HTML5引入了自定义数据属性。元素上属性名以data-开头的属性都是数据属性。您还可以使用这些数据属性来设置元素的样式。接下来，让我们深入了解数据属性的基础知识，并学习如何在CSS和JavaScript中访问它们的值。HTML语法如上，data属性的名称始终以data-开头。下面是一个示例：沙拉王您现在可以使用这些数据属性为您的用户搜索和分类餐厅。例如，您现在可以向他们展示一定距离内的所有素食餐厅。除了data-前缀之外，有效的自定义数据属性名称必须仅包含字母、数字、连字符(-)、点(.)、冒号(:)或下划线(_)，并且不能包含大写字母。在使用数据属性时，应牢记以下两条规则：第一：这些属性中存储的数据应为字符串类型。任何可以编码为字符串的东西也可以存储在数据属性中。所有类型转换都需要使用JavaScript完成。第二：只有在没有其他合适的HTML元素或属性时才应使用数据属性。例如，使用data-class属性来存储元素的class属性的值是不合适的。一个元素可以有任意数量的数据属性，这些属性可以有任何需要的值。数据属性和CSS您可以使用CSS中的属性选择器来根据数据属性设置元素样式。您还可以借助attr()函数向用户显示存储在数据属性中的信息（以工具提示或其他方式）。样式元素现在回到我们的餐厅示例，您可以使用数据属性为用户提供有关餐厅类型或他们与餐厅的距离的信息，或者为餐厅设计不同的背景颜色。下面是一个例子：li[data-type='veg']{background:#8BC34A;}li[data-type='french']{background:#3F51B5;}HTML代码：

纽约的餐馆

法语

素食

德语

ul>Bloss海德堡DanielDirtCandyLaGrenouilleBalthazar当归厨房BlaueGansReichenbachHallCSS代码：html{font-family:'Lato';边距：20px自动；最大宽度：600px；font-size:1.25em;}ul{list-style:none;填充：0;}li{填充：5px10px;边距：5px0；白颜色;border-radius:5px;}.hint{margin-right:30px;显示：内联块；}span.french，span.veg，span.german{宽度：15px；高度：15px；边界半径：50%；显示：内联块；向左飘浮;顶部边距：5px；margin-right:5px;}span.french{background:#3F51B5;}span.veg{background:#8BC34A;}span.ger人{背景：#bb6666;}li[data-type='veg']{背景：#8BC34A;}li[data-type='french']{背景：#3F51B5;}li[data-type='german']{background:#bb6666;}Rendering:Createtooltips您可以使用工具提示向用户显示一些与元素相关的附加信息，但由于不能完全使用纯CSS工具提示，我建议您在简单的模型上使用它们这种方法而不是在生产现场。您要显示的信息可以存储在data-tooltip属性中。Word然后您可以使用::before伪元素将数据呈现给用户。span::before{内容：attr（数据工具提示）；//其他的样式规则}span:hover::before{display:inline-block;}HTML代码：

灰太狼，也被称为更多信息timberwolf或西部狼，是原产于欧亚大陆荒野和偏远地区的犬科动物和更多信息北美。它是其家族中现存最大的成员，雄性平均重43-45公斤（95-99磅），雌性平均重36-38.5公斤（79-85磅）。和红狼一样，它区别于其他somemoreinformationCanisspecies由于其较大的尺寸和较不尖锐的特征，尤其是在耳朵上

CSS代码：html{font-family:'Lato';边距：20px自动；行高：1.5；最大宽度：600px；字体大小：1.25em;}span.tooltip{填充：0px5px;位置：相对；背景：#FFBB99；光标：指针；}.tooltip-info{位置：绝对；顶部：-9999px；左：-9999px；}span.tooltip::before{内容：attr（数据-tooltip）；位置：绝对；顶部：1.5em；字体大小：0.9em；填充：1px5px；显示：无；白颜色;背景：rgba(0,0,0,0.75);4px;transition:opacity0.1sease-out;z-指数：99；文本对齐：左；}span:hover::before{display:inline-block;}效果图（鼠标移到浅红色区域会出现黑色背景说明）：使用JavaScript访问数据属性JavaScript中访问数据属性的方式有3种使用getAttribute和setAttribute您可以在JavaScript中使用getAttribute()和setAttribute()来获取和设置不同数据属性的值。如果给定的属性不存在，则getAttribute方法将返回null或空字符串。下面是使用这些方法的示例：varrestaurant=document.getElementById("restaurantId");varratings=restaurant.getAttribute("data-ratings");您可以使用setAttribute方法修改现有属性的值或添加新属性。restaurant.setAttribute("data-owner-name","someName");使用数据集属性访问数据属性的更简单方法是通过数据集属性。此属性返回一个DOMStringMap对象，该对象包含一个包含所有自定义数据属性的目录。使用数据集属性时，您应该牢记以下步骤：将自定义数据属性转换为DOMStringMap键值需要三个步骤：从属性名称中删除data-前缀从名称中删除任何连字符后跟小写字母Delete，并将后面的字母转为大写字母（即驼峰命名法——译者注），其他字符不变。这意味着任何没有跟随小写字母的连字符也将保持不变。然后可以使用存储在对象中的驼峰命名法名称作为键来访问属性，例如element.dataset.keyname。另一种访问属性的方法是使用括号表示法，例如element.dataset[keyname]。考虑以下HTML代码：SaladKing下面是几个例子:varrestaurant=document.getElementById("restaurantId");varratings=restaurant.dataset.ratings;restaurant.dataset.ratings=newRating;varowner=restaurant.dataset['ownerName'];restaurant.dataset['ownerName']='新主人';现在主流浏览器都支持这种方式。与以前访问自定义数据属性的方法相比，您应该更喜欢这种方法。使用jQuery，您还可以使用jQuery的data()方法来访问元素的数据属性。在jQuery1.6之前，您必须使用以下代码来访问数据属性：varrestaurant=$("#restaurantId");varowner=restaurant.data("owner-name");restaurant.data("owner-name“，“新名字”）;从版本1.6开始，jQuery使用驼峰式版本的数据属性。现在，您可以使用以下代码来做同样的事情：varrestaurant=$("#restaurantId");varowner=restaurant.data("ownerName");restaurant.data("ownerName","newName");你应该知道，jQuery内部也会尝试将从data属性中获取的字符串转换为合适的类型，例如数字、布尔值、对象、数组和空值。varrestaurant=$("#restaurantId");varidentifier=restaurant.data("identifier");console.log（标识符类型）；//number如果你希望jQuery获取属性的值作为字符串而不是尝试将其转换为另一种类型，你应该使用jQuery的attr()方法。jQuery仅在第一次访问时检索数据属性的值。以后永远不会访问或更改数据属性的值。您对这些属性所做的任何更改都将在内部进行，并且只能使用jQuery进行访问。假设您正在操作以下列表项的数据属性：SaladKing您可以使用以下代码更改其数据距离属性的值：vardistance=$("#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）获取属性数据距离的值总是返回旧结果。结论在本教程中，我介绍了您需要了解的关于HTML5数据属性的所有重要内容。除了使用属性选择器来创建工具提示和样式元素之外，您还可以使用数据属性来存储和显示一些其他用户数据，例如未读消息的通知等。如果您对数据属性有任何其他疑问，请在评论中告诉我。