html5游戏怎么修改数值，如何使⽤HTML5⾃定义数据属性在本⽂中，我将向你介绍如何使⽤HTML5⾃定义数据属性。我还将向你介绍⼀些开发⼈员在⼯作中经常使⽤的优秀实例。
为什么需要⾃定义数据属性？
很多时候我们需要存储⼀些与不同DOM元素相关联的信息。这些信息对于读者来说可能是不需要的，但是可以轻松的访问这些信息将会给我们开发者的⼯作带来极⼤的便利。
例如，假设你有⼀份某个餐饮类⽹站上所有餐馆的名单。在HTML5之前，如果你想存储餐馆提供的⾷物种类或餐馆与⽤户之间的距离等信息，那么你将使⽤HTML的class属性。但是如果你还需要存储餐馆的id以便查看⽤户想要访问的特定餐厅该怎么办？
以下是基于HTMLclass属性的⽅法存在的⼀些问题：
HTMLclass属性不是⽤来存储这样的数据的，其主要⽬的是允许开发⼈员给⼀组元素添加样式信息。
我们需要为每个追加的信息向元素中添加⼀个新class，这使得解析JavaScript中的数据得到我们所需要的内容变得更加困难。
假设给定的类名以数字开头。如果你决定稍后根据类名来设计元素的样式，那么你在样式表中将不得不回避数字或者使⽤属性选择器。
为了解决这些问题，HTML5引⼊了⾃定义数据属性。⼀个元素上属性名以data-开头的属性都是数据属性。你也可以使⽤这些数据属性来给元素设计样式。
接下来，让我们深⼊了解数据属性的基础知识、学习如何在CSS和JavaScript中访问数据属性的值。
HTML语法
如上所述，data属性的名称始终以data-开头。以下是⼀个例⼦：
Salad King
你现在可以使⽤这些数据属性为你的⽤户搜索和排序餐厅。例如，你现在可以向他们展现在⼀定距离内的所有素⾷餐厅。
除了data-前缀之外，有效的⾃定义数据属性的名称必须只能包含字母、数字、连字符( - )、点(。)、冒号(:)或下划线(_)，不能包含⼤写字母。
在使⽤数据属性时，你应该记住下⾯两个规则：
第⼀：存储在这些属性中的数据应该是字符串类型。任何可以被编码为字符串类型的东西也可以存储在数据属性中。所有的类型转换都需要使⽤JavaScript完成。
第⼆：数据属性应该只在没有其他合适的HTML元素或属性时使⽤。例如，使⽤data-class属性存储元素class属性的值是不恰当的。
⼀个元素可以具有任意数量的数据属性，这些数据属性也可以具有任何所需要的值。
数据属性与CSS
你可以根据数据属性使⽤CSS中的属性选择器来为元素设计样式。你还可以借助attr()函数将数据属性中存储的信息显⽰给⽤户(以⼯具提⽰或其他⽅式)。
设计元素样式
现在回到我们餐厅的例⼦，你可以使⽤数据属性向⽤户提供关于餐厅类型或者他们与餐厅之间的距离等信息，或者为餐厅设计不同的背景颜⾊。以下是⼀个例⼦：
li[data-type='veg'] {
background: #8BC34A;
}
li[data-type='french'] {
background: #3F51B5;
}
HTML代码：
Restaurants in New York
French
Vegetarian
German
Bloss
Heidelberg
Daniel
Dirt Candy
La Grenouille
Balthazar
Angelica Kitchen
Blaue Gans
Reichenbach Hall
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, an {
width: 15px;
height: 15px;
border-radius: 50%;
cssclass属性
display: inline-block;
float: left;
margin-top: 5px;
margin-right: 5px;
}
span.french {
background: #3F51B5;
}
span.veg {
background: #8BC34A;
}
background: #bb6666;
}
li[data-type='veg'] {
background: #8BC34A;
}
li[data-type='french'] {
background: #3F51B5;
}
li[data-type='german'] {
background: #bb6666;
}
效果图：
创建⼯具提⽰
你可以使⽤⼯具提⽰向⽤户显⽰⼀些与元素相关的附加信息。但是因为纯CSS的⼯具提⽰不能完全使⽤，所以我建议你在简单的模型上使⽤这种⽅法⽽不是在⼀个产品型的⽹站上。
你要显⽰的信息可以存储在⼀个data-tooltip属性中。
Word
然后，你可以使⽤::before伪元素将数据呈现给⽤户。
span::before {
content: attr(data-tooltip);
// 其余的样式规则
}
span:hover::before {
display: inline-block;
}
HTML代码：
The gray wolf, also known as the some more information timber wolf or western wolf, is a canine native to the wilderness and remote areas of Eurasia and some more information North America. 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 some more informationCanis species by its larger size and less pointed features, particularly on the ears and muzzle.
CSS代码：
html {
font-family: 'Lato';
margin: 20px auto;
line-height: 1.5;
max-width: 600px;
font-size: 1.25em;
}
padding: 0px 5px;
position: relative;
background: #FFBB99;
cursor: pointer;
}
.tooltip-info {
position: absolute;
top: -9999px;
left: -9999px;
}
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;
}
效果图(⿏标移⼊淡红⾊的区域会出⿊⾊背景的提⽰)：
使⽤JavaScript访问数据属性
在JavaScript中有三种⽅式访问数据属性。
使⽤getAttribute和setAttribute
你可以使⽤JavaScript中的getAttribute()和setAttribute()来获取和设置不同数据属性的值。
如果给定的属性不存在，该getAttribute⽅法将返回null或⼀个空字符串。以下是使⽤这些⽅法的⽰例：
var restaurant = ElementById("restaurantId");
var ratings = Attribute("data-ratings");
你可以使⽤该setAttribute⽅法修改现有属性的值或添加新属性。
restaurant.setAttribute("data-owner-name", "someName");
使⽤dataset属性
访问数据属性的⼀种更为简单的⽅法是借助dataset属性。此属性返回⼀个DOMStringMap对象，此对象拥有⼀个包含所有⾃定义数据属性的⽬录。
使⽤ dataset属性时，你应该记住下⾯这些步骤：
将⾃定义数据属性转换为DOMStringMap的键值需要三个步骤：
将该data-前缀从属性名中删除
将任何后跟⼩写字母的连字符从名称中删除，并将其后⾯的字母转换为⼤写字母(即驼峰命名法——译者注)
其他字符保持不变。这意味着任何没有被⼩写字母跟着的连字符也将保持不变。
然后可以使⽤存储在对象中按照驼峰命名法命名的名称作为键来访问属性，如element.dataset.keyname。
访问属性的另⼀种⽅法是使⽤括号符号，如 element.dataset[keyname]。
考虑以下的HTML代码：
Salad King

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。