怎样运用HTML5自定义数据属性

2019年8月25日 202次阅读 来源: 间阳幕宾

在本文中，我将向你引见怎样运用HTML5自定义数据属性。我还将向你引见一些开发人员在事变中常常运用的优异实例。

为何须要自定义数据属性？

许多时刻我们须要存储一些与差别DOM元素相干联的信息。这些信息关于读者来讲多是不须要的，然则能够轻松的接见这些信息将会给我们开发者的事变带来极大的方便。

比方，假定你有一份某个餐饮类网站上一切餐馆的名单。在HTML5之前，假如你想存储餐馆供应的食品品种或餐馆与用户之间的间隔等信息，那末你将运用HTML的class属性。然则假如你还须要存储餐馆的id以便检察用户想要接见的特定餐厅该怎么办？

以下是基于HTMLclass属性的要领存在的一些题目：

  1. HTMLclass属性不是用来存储如许的数据的，其主要目标是许可开发人员给一组元素增加款式信息。

  2. 我们须要为每一个追加的信息向元素中增加一个新class，这使得剖析JavaScript中的数据获得我们所须要的内容变得越发难题。

  3. 假定给定的类名以数字开首。假如你决议稍后依据类名来设想元素的款式，那末你在款式表中将不能不逃避数字或许运用属性选择器。

为了处理这些题目，HTML5引入了自定义数据属性。一个元素上属性名以data-开首的属性都是数据属性。你也能够运用这些数据属性来给元素设想款式。

接下来，让我们深切相识数据属性的基础学问、进修怎样在CSS和JavaScript中接见数据属性的值。

HTML语法

如上所述，data属性的称号一直以data-开首。以下是一个例子：

<li data-type="veg" data-distance="2miles" data-identifier="10318">
  Salad King
</li>

你如今能够运用这些数据属性为你的用户搜刮和排序餐厅。比方，你如今能够向他们展如今肯定间隔内的一切素食餐厅。

除了data-前缀以外，有用的自定义数据属性的称号必需只能包括字母、数字、连字符（ – ）、点（。）、冒号（:）或下划线（_），不能包括大写字母。

在运用数据属性时，你应当记着下面两个划定规矩：

第一：存储在这些属性中的数据应当是字符串范例。任何能够被编码为字符串范例的东西也能够存储在数据属性中。一切的范例转换都须要运用JavaScript完成。

第二：数据属性应当只在没有其他适宜的HTML元素或属性时运用。比方，运用data-class属性存储元素class属性的值是不适当的。

一个元素能够具有恣意数目的数据属性，这些数据属性也能够具有任何所须要的值。

数据属性与CSS

你能够依据数据属性运用CSS中的属性选择器来为元素设想款式。你还能够借助attr()函数将数据属性中存储的信息显现给用户（以东西提醒或其他体式格局）。

设想元素款式

如今回到我们餐厅的例子，你能够运用数据属性向用户供应关于餐厅范例或许他们与餐厅之间的间隔等信息，或许为餐厅设想差别的背景色彩。以下是一个例子：

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

HTML代码：

<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;
}

效果图：
《怎样运用HTML5自定义数据属性》

建立东西提醒

你能够运用东西提醒向用户显现一些与元素相干的附加信息。然则由于纯CSS的东西提醒不能完整运用，所以我发起你在简朴的模子上运用这类要领而不是在一个产物型的网站上。

你要显现的信息能够存储在一个data-tooltip属性中。

<span data-tooltip="A simple explanation">Word</span>

然后，你能够运用::before伪元素将数据显现给用户。

span::before {
  content: attr(data-tooltip);
  // 其他的款式划定规矩
}

span:hover::before {
  display: inline-block;
}

HTML代码：

<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, 0, 0.75);                border-radius: 4px; 
    transition: opacity 0.1s ease-out; 
    z-index: 99;  
    text-align: left;
}

span:hover::before {  
    display: inline-block;
}

效果图（鼠标移入淡红色的地区会出黑色背景的提醒）：
《怎样运用HTML5自定义数据属性》

运用JavaScript接见数据属性

在JavaScript中有三种体式格局接见数据属性。

运用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");

运用dataset属性

接见数据属性的一种更加简朴的要领是借助dataset属性。此属性返回一个DOMStringMap对象，此对象具有一个包括一切自定义数据属性的目次。

运用 dataset属性时，你应当记着下面这些步骤：

将自定义数据属性转换为DOMStringMap的键值须要三个步骤：

  1. 将该data-前缀从属性名中删除

  2. 将任何后跟小写字母的连字符从称号中删除，并将厥后面的字母转换为大写字母（即驼峰定名法——译者注）

  3. 其他字符坚持稳定。这意味着任何没有被小写字母随着的连字符也将坚持稳定。

然后能够运用存储在对象中根据驼峰定名法定名的称号作为键来接见属性，如element.dataset.keyname。

接见属性的另一种要领是运用括号标记，如 element.dataset[keyname]。

斟酌以下的HTML代码：

<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';

如今一切的主流浏览器都支撑这类要领。比拟之前接见自定义数据属性的要领，你应当更喜好这类要领。

运用 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数据属性中你须要相识的一切主要的学问。除了运用属性选择器建立东西提醒和款式元素以外，还能够运用数据属性来存储和显现用户一些其他数据，比方一个未读音讯的关照等等。

假如你对数据属性有任何其他题目，请在批评中告诉我。

原文链接：https://www.sitepoint.com/how…

    原文作者：间阳幕宾
    原文地址: https://segmentfault.com/a/1190000009227732
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞