【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】如何使用HTML5自定義數(shù)據(jù)屬性

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】如何使用HTML5自定義數(shù)據(jù)屬性

為什么需要自定義數(shù)據(jù)屬性？很多時(shí)候我們需要存儲(chǔ)一些與不同DOM元素相關(guān)聯(lián)的信息。這些信息對(duì)于讀者來(lái)說(shuō)可能是不需要的，但是可以輕松的訪問(wèn)這些信息將會(huì)給我們開(kāi)發(fā)者的工作帶來(lái)極大的便利。例如，假設(shè)你有一份某個(gè)餐飲類網(wǎng)站上所有餐館的名單。在HTML5之前，如果你想存儲(chǔ)餐館提供的食物種類或餐館與用戶之間的距離等信息，那么你將使用HTML的class屬性。但是如果你還需要存儲(chǔ)餐館的id以便查看用戶想要訪問(wèn)的特定餐廳該怎么辦？以下是基于HTMLclass屬性的方法存在的一些問(wèn)題：HTMLclass屬性不是用來(lái)存儲(chǔ)這樣的數(shù)據(jù)的，其主要目的是允許開(kāi)發(fā)人員給一組元素添加樣式信息。我們需要為每個(gè)追加的信息向元素中添加一個(gè)新class，這使得解析JavaScript中的數(shù)據(jù)得到我們所需要的內(nèi)容變得更加困難。假設(shè)給定的類名以數(shù)字開(kāi)頭。如果你決定稍后根據(jù)類名來(lái)設(shè)計(jì)元素的樣式，那么你在樣式表中將不得不回避數(shù)字或者使用屬性選擇器。為了解決這些問(wèn)題，HTML5引入了自定義數(shù)據(jù)屬性。一個(gè)元素上屬性名以data-開(kāi)頭的屬性都是數(shù)據(jù)屬性。你也可以使用這些數(shù)據(jù)屬性來(lái)給元素設(shè)計(jì)樣式。接下來(lái)，讓我們深入了解數(shù)據(jù)屬性的基礎(chǔ)知識(shí)、學(xué)習(xí)如何在CSS和JavaScript中訪問(wèn)數(shù)據(jù)屬性的值。HTML語(yǔ)法如上所述，data屬性的名稱始終以data-開(kāi)頭。以下是一個(gè)例子：<li

data-type="veg"

data-distance="2miles"

data-identifier="10318">

Salad

King</li>你現(xiàn)在可以使用這些數(shù)據(jù)屬性為你的用戶搜索和排序餐廳。例如，你現(xiàn)在可以向他們展現(xiàn)在一定距離內(nèi)的所有素食餐廳。除了data-前綴之外，有效的自定義數(shù)據(jù)屬性的名稱必須只能包含字母、數(shù)字、連字符（-）、點(diǎn)（。）、冒號(hào)（:）或下劃線（_），不能包含大寫(xiě)字母。在使用數(shù)據(jù)屬性時(shí)，你應(yīng)該記住下面兩個(gè)規(guī)則：第一：存儲(chǔ)在這些屬性中的數(shù)據(jù)應(yīng)該是字符串類型。任何可以被編碼為字符串類型的東西也可以存儲(chǔ)在數(shù)據(jù)屬性中。所有的類型轉(zhuǎn)換都需要使用JavaScript完成。第二：數(shù)據(jù)屬性應(yīng)該只在沒(méi)有其他合適的HTML元素或?qū)傩詴r(shí)使用。例如，使用data-class屬性存儲(chǔ)元素class屬性的值是不恰當(dāng)?shù)?。一個(gè)元素可以具有任意數(shù)量的數(shù)據(jù)屬性，這些數(shù)據(jù)屬性也可以具有任何所需要的值。數(shù)據(jù)屬性與CSS你可以根據(jù)數(shù)據(jù)屬性使用CSS中的屬性選擇器來(lái)為元素設(shè)計(jì)樣式。你還可以借助attr()函數(shù)將數(shù)據(jù)屬性中存儲(chǔ)的信息顯示給用戶（以工具提示或其他方式）。設(shè)計(jì)元素樣式現(xiàn)在回到我們餐廳的例子，你可以使用數(shù)據(jù)屬性向用戶提供關(guān)于餐廳類型或者他們與餐廳之間的距離等信息，或者為餐廳設(shè)計(jì)不同的背景顏色。以下是一個(gè)例子：li[data-type='veg']

{

background:

#8BC34A;

}li[data-type='french']

{

background:

#3F51B5;

}HTML代碼：<h3>Restaurants

in

New

York</h3><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;

}效果圖：創(chuàng)建工具提示你可以使用工具提示向用戶顯示一些與元素相關(guān)的附加信息。但是因?yàn)榧僀SS的工具提示不能完全使用，所以我建議你在簡(jiǎn)單的模型上使用這種方法而不是在一個(gè)產(chǎn)品型的網(wǎng)站上。你要顯示的信息可以存儲(chǔ)在一個(gè)data-tooltip屬性中。<span

data-tooltip="A

simple

explanation">Word</span>然后，你可以使用::before偽元素將數(shù)據(jù)呈現(xiàn)給用戶。span::before

{

content:

attr(data-tooltip);

//

其余的樣式規(guī)則}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;

}效果圖（鼠標(biāo)移入淡紅色的區(qū)域會(huì)出黑色背景的提示）：使用JavaScript訪問(wèn)數(shù)據(jù)屬性在JavaScript中有三種方式訪問(wèn)數(shù)據(jù)屬性。使用getAttribute和setAttribute你可以使用JavaScript中的getAttribute()和setAttribute()來(lái)獲取和設(shè)置不同數(shù)據(jù)屬性的值。如果給定的屬性不存在，該getAttribute方法將返回null或一個(gè)空字符串。以下是使用這些方法的示例：var

restaurant

=

document.getElementById("restaurantId");var

ratings

=

restaurant.getAttribute("data-ratings");你可以使用該setAttribute方法修改現(xiàn)有屬性的值或添加新屬性。restaurant.setAttribute("data-owner-name",

"someName");使用dataset屬性訪問(wèn)數(shù)據(jù)屬性的一種更為簡(jiǎn)單的方法是借助dataset屬性。此屬性返回一個(gè)DOMStringMap對(duì)象，此對(duì)象擁有一個(gè)包含所有自定義數(shù)據(jù)屬性的目錄。使用

dataset屬性時(shí)，你應(yīng)該記住下面這些步驟：將自定義數(shù)據(jù)屬性轉(zhuǎn)換為DOMStringMap的鍵值需要三個(gè)步驟：將該data-前綴從屬性名中刪除將任何后跟小寫(xiě)字母的連字符從名稱中刪除，并將其后面的字母轉(zhuǎn)換為大寫(xiě)字母（即駝峰命名法——譯者注）其他字符保持不變。這意味著任何沒(méi)有被小寫(xiě)字母跟著的連字符也將保持不變。然后可以使用存儲(chǔ)在對(duì)象中按照駝峰命名法命名的名稱作為鍵來(lái)訪問(wèn)屬性，如element.dataset.keyname。訪問(wèn)屬性的另一種方法是使用括號(hào)符號(hào)，如

element.dataset[keyname]?？紤]以下的HTML代碼：<li

data-type="veg"

data-distance="2miles"

data-identifier="10318"

data-owner-name="someName">

Salad

King

</li>以下是幾個(gè)例子：var

restaurant

=

document.getElementById("restaurantId");var

ratings

=

restaurant.dataset.ratings;

restaurant.dataset.ratings

=

newRating;var

owner

=

restaurant.dataset['ownerName'];

restaurant.dataset['ownerName']

=

'newOwner';現(xiàn)在所有的主流瀏覽器都支持這種方法。相比之前訪問(wèn)自定義數(shù)據(jù)屬性的方法，你應(yīng)該更喜歡這種方法。使用jQuery你也可以使用jQuery的data()方法來(lái)訪問(wèn)元素的數(shù)據(jù)屬性。在jQuery1.6之前，你必須使用以下代碼來(lái)訪問(wèn)數(shù)據(jù)屬性：var

restaurant

=

$("#restaurantId");var

owner

=

restaurant.data("owner-name");

restaurant.data("owner-name",

"newName");從版本1.6開(kāi)始，jQuery使用駝峰命名法版本的數(shù)據(jù)屬性。現(xiàn)在，你可以使用以下代碼來(lái)做同樣的事情：var

restaurant

=

$("#restaurantId");var

owner

=

restaurant.data("ownerName");

restaurant.data("ownerName",

"newName");你應(yīng)該知道，jQuery內(nèi)部還試圖將從數(shù)據(jù)屬性中獲取的字符串轉(zhuǎn)換成合適