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

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

為什么需要自定義數(shù)據(jù)屬性？很多時候我們需要存儲一些與不同DOM元素相關(guān)聯(lián)的信息。這些信息對于讀者來說可能是不需要的，但是可以輕松的訪問這些信息將會給我們開發(fā)者的工作帶來極大的便利。例如，假設(shè)你有一份某個餐飲類網(wǎng)站上所有餐館的名單。在HTML5之前，如果你想存儲餐館提供的食物種類或餐館與用戶之間的距離等信息，那么你將使用HTML的class屬性。但是如果你還需要存儲餐館的id以便查看用戶想要訪問的特定餐廳該怎么辦？以下是基于HTMLclass屬性的方法存在的一些問題：HTMLclass屬性不是用來存儲這樣的數(shù)據(jù)的，其主要目的是允許開發(fā)人員給一組元素添加樣式信息。我們需要為每個追加的信息向元素中添加一個新class，這使得解析JavaScript中的數(shù)據(jù)得到我們所需要的內(nèi)容變得更加困難。假設(shè)給定的類名以數(shù)字開頭。如果你決定稍后根據(jù)類名來設(shè)計元素的樣式，那么你在樣式表中將不得不回避數(shù)字或者使用屬性選擇器。為了解決這些問題，HTML5引入了自定義數(shù)據(jù)屬性。一個元素上屬性名以data-開頭的屬性都是數(shù)據(jù)屬性。你也可以使用這些數(shù)據(jù)屬性來給元素設(shè)計樣式。接下來，讓我們深入了解數(shù)據(jù)屬性的基礎(chǔ)知識、學(xué)習(xí)如何在CSS和JavaScript中訪問數(shù)據(jù)屬性的值。HTML語法如上所述，data屬性的名稱始終以data-開頭。以下是一個例子：<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ù)字、連字符（-）、點（。）、冒號（:）或下劃線（_），不能包含大寫字母。在使用數(shù)據(jù)屬性時，你應(yīng)該記住下面兩個規(guī)則：第一：存儲在這些屬性中的數(shù)據(jù)應(yīng)該是字符串類型。任何可以被編碼為字符串類型的東西也可以存儲在數(shù)據(jù)屬性中。所有的類型轉(zhuǎn)換都需要使用JavaScript完成。第二：數(shù)據(jù)屬性應(yīng)該只在沒有其他合適的HTML元素或?qū)傩詴r使用。例如，使用data-class屬性存儲元素class屬性的值是不恰當(dāng)?shù)?。一個元素可以具有任意數(shù)量的數(shù)據(jù)屬性，這些數(shù)據(jù)屬性也可以具有任何所需要的值。數(shù)據(jù)屬性與CSS你可以根據(jù)數(shù)據(jù)屬性使用CSS中的屬性選擇器來為元素設(shè)計樣式。你還可以借助attr()函數(shù)將數(shù)據(jù)屬性中存儲的信息顯示給用戶（以工具提示或其他方式）。設(shè)計元素樣式現(xiàn)在回到我們餐廳的例子，你可以使用數(shù)據(jù)屬性向用戶提供關(guān)于餐廳類型或者他們與餐廳之間的距離等信息，或者為餐廳設(shè)計不同的背景顏色。以下是一個例子：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)的附加信息。但是因為純CSS的工具提示不能完全使用，所以我建議你在簡單的模型上使用這種方法而不是在一個產(chǎn)品型的網(wǎng)站上。你要顯示的信息可以存儲在一個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ū)域會出黑色背景的提示）：使用JavaScript訪問數(shù)據(jù)屬性在JavaScript中有三種方式訪問數(shù)據(jù)屬性。使用getAttribute和setAttribute你可以使用JavaScript中的getAttribute()和setAttribute()來獲取和設(shè)置不同數(shù)據(jù)屬性的值。如果給定的屬性不存在，該getAttribute方法將返回null或一個空字符串。以下是使用這些方法的示例：var

restaurant

=

document.getElementById("restaurantId");var

ratings

=

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

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

dataset屬性時，你應(yīng)該記住下面這些步驟：將自定義數(shù)據(jù)屬性轉(zhuǎn)換為DOMStringMap的鍵值需要三個步驟：將該data-前綴從屬性名中刪除將任何后跟小寫字母的連字符從名稱中刪除，并將其后面的字母轉(zhuǎn)換為大寫字母（即駝峰命名法——譯者注）其他字符保持不變。這意味著任何沒有被小寫字母跟著的連字符也將保持不變。然后可以使用存儲在對象中按照駝峰命名法命名的名稱作為鍵來訪問屬性，如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';現(xiàn)在所有的主流瀏覽器都支持這種方法。相比之前訪問自定義數(shù)據(jù)屬性的方法，你應(yīng)該更喜歡這種方法。使用jQuery你也可以使用jQuery的data()方法來訪問元素的數(shù)據(jù)屬性。在jQuery1.6之前，你必須使用以下代碼來訪問數(shù)據(jù)屬性：var

restaurant

=

$("#restaurantId");var

owner

=

restaurant.data("owner-name");

restaurant.data("owner-name",

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

restaurant

=

$("#restaurantId");var

owner

=

restaurant.data("ownerName");

restaurant.data("ownerName",

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