<cite id="xtndt"></cite>
<cite id="xtndt"></cite>
<thead id="xtndt"><i id="xtndt"></i></thead><var id="xtndt"><video id="xtndt"></video></var>
<var id="xtndt"><strike id="xtndt"></strike></var>
<var id="xtndt"></var><menuitem id="xtndt"><video id="xtndt"></video></menuitem>
<var id="xtndt"></var>
<var id="xtndt"></var>
<var id="xtndt"><video id="xtndt"><menuitem id="xtndt"></menuitem></video></var>
<cite id="xtndt"></cite>

杭州做網站:您需要了解的HTML5數據屬性

2019.08.02 mf_web

84

HTML5數據屬性允許您將自定義數據分配給元素。本文介紹了如何使用它,并提供了理想情況下使用它的示例。杭州做網站

介紹

在HTML5之前,我們不得不依賴于使用“class”或“rel”屬性來存儲我們可以在網站中使用的小數據片段。這有時會導致問題,并可能導致網站的樣式和功能之間發生沖突。HTML5的出現引入了一個稱為“數據”的新屬性。在本文中,我將討論一些如何使用此屬性以及如何正確使用它的示例。

隨著網站越來越受數據驅動和應用程序的影響,他們開始掌握更多有關特定元素的數據。例如,如果我們正在創建一個音頻應用程序。我們可能有標準的標記,例如:

1
2
3
<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" />
</audio>

上述標記是完全可以接受的,但有時我們可能希望存儲除源以外的每個軌道的更多信息。例如,我們可能希望能夠分配其他特定的曲目信息,例如持續時間,節奏和藝術家。我們可以通過為每個音頻源分配自定義數據屬性來實現此目的,例如:

1
2
3
<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>

通過提供這些自定義數據屬性,我們可以執行諸如在持續時間,節奏或藝術家使用其關聯值在我們的應用程序中搜索,過濾或分組任務。

如何使用數據屬性

數據屬性的名稱必須以字符串'data-'開頭,并且必須在連字符后面包含至少一個使用任何HTML命名約定的字符。

數據屬性的W3C規范聲明:

自定義數據屬性旨在將自定義數據存儲為頁面或應用程序的私有數據,因為沒有更合適的屬性或元素。

這意味著我們應該只在我們的應用程序內部使用該數據,它不應該用于向我們的用戶顯示信息。同樣重要的是要注意,您可以為具有任何值的元素分配任意數量的自定義屬性。

我應該何時使用數據屬性?

我們已經看過你如何使用數據屬性,但為了讓你清楚地理解,讓我們再看幾個例子。

幸運的是,Webdesigntuts +已經對一些好的用例示例進行了詳細介紹。其中一個關鍵是通過在錨標記中分配通知項來查看如何使用它們來設置和顯示菜單通知氣泡。這次data屬性用于指示通知氣泡的氣泡值。

1
<a href="#" class="pink" data-bubble="2">Profile</a>

在另一個快速提示中,我們還可以看到它如何用作工具提示的標記的一部分

1
<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

此時間用于顯示工具提示的文本。

我什么時候不應該使用數據屬性?

我們不應該為已經建立或更合適的屬性使用數據屬性。例如,使用它是不合適的:

1
<span data-time="20:00">8pm<span>

當我們可以datetime在time如下元素中使用已定義的屬性時:

1
<time datetime="20:00">8pm</time>

數據屬性不應用作元數據或微格式的替代。微格式主要是為人類設計的,并且是為了給出我們的標記上下文而引入的。例如,如果您有一個Vcard提供有關個人或組織的聯系信息,那么您可以給它一類“vcard”,讓機器了解這是聯系信息。

使用微格式,你應該使用你的標記

1
2
3
<div class="vcard">
 <span class="fn " >Aaron Lumsden</span>
</div>

而不是使用數據屬性,如

1
2
3
<div class="vcard">
 <span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>

要了解有關微格式的更多信息,請訪問Mircorformats.org。

使用CSS的數據屬性

一旦我們在HTML標記中實現了數據屬性,我們就可以使用CSS來定位它們。重要的是要注意,不應該直接使用數據屬性來使用樣式,盡管在某些情況下它可能是合適的。在CSS中定位數據屬性與定位其他屬性類似,您可以像下面這樣使用它們:

1
2
3
[data-role="page"] {
  /* Styles */
}

例如,如果您要創建跨設備友好的網站或應用程序,那么您可能希望定位一些您只應在移動設備上查看的特定內容。采取以下標記

1
2
3
<div data-role="mobile">
Mobile only content
</div>

使用CSS,您可以在桌面上查看時隱藏所有僅限移動設備的頁面。

1
2
3
div[data-role="mobile"] { 
  display:none; 
}

雖然不建議基于查看設備隱藏內容,但可能存在適合的情況。您應該根據每個具體情況和案例來確定這一點。

也可以使用屬性中的數據并通過CSS顯示它。盡管規范說您不應該使用自定義屬性中的數據向用戶顯示,但是在某些情況下可能是最好的方法。這就是它的實現方式。

1
<div class="test" data-content="This is the div content">test</div>

在CSS中,您將使用':after'偽元素(或其他一些生成的內容)并將該屬性用作'after'內容的一部分,如下所示:

1
2
3
4
6
7
.test {
  display: inline-block;
}
 
.test:after {
  content: attr(data-content);
}

然后,這將在'.text'div中顯示'This is the div content'。 

使用數據屬性使用jQuery

現在我們已經了解了如何使用CSS使用data屬性來定位元素,讓我們看一下如何使用jQuery獲取數據。

注意:處理數據超出了本教程的范圍,因為本教程專門針對前端開發人員和設計人員。

我們可以通過幾種方法使用jQuery從元素中獲取數據。讓我們來看看其中的一些。

1
<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

如果我們有一個錨標記,就像上面那個,它具有data-info的數據屬性,那么我們可以像獲取任何其他屬性值一樣訪問該數據。

1
2
3
4
$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

您可以通過在Web檢查器中打開js控制臺,然后點擊鏈接來測試它。

關于data屬性的好處是我們也可以使用它來提供這樣的json數據。

1
<a href="google"  class="button" data-info='{"foo":"bar"}'></a>

使用jQuery我們可以使用jQuery的數據對象方法獲取這些數據。

1
2
3
4
$('.button').click(function(e) {
   e.preventDefault();
    thisdata = $('div').data('info').foo;
   console.log(thisdata);
 });

然后,上面的示例將“bar”記錄到控制臺日志中。

跨瀏覽器支持

我知道在你使用這個新屬性之前,你會想知道哪些瀏覽器支持它以及什么時候可以開始使用它。好消息是它在所有現代瀏覽器中得到了很好的支持。任何支持HTML的東西都可以訪問數據屬性。如果您正在使用該屬性進行樣式設置以及訪問數據(請謹慎使用),那么瀏覽器將需要支持CSS3選擇器。

更好的消息是,所有瀏覽器(甚至是IE7)都允許你在元素上使用data- *屬性,如果你使用的是jQuery 1.4或更高版本,那么你可以使用jQuery的數據對象訪問數據。但是,如果您只是使用JavaScript,則必須使用JavaScript的“getAttribute”方法訪問數據。

有關數據集的完整列表支持,您可以查看canIuse.com。

結論

隨著網站和網絡應用程序變得越來越復雜并開始保存更多信息和數據,這個新屬性絕對是工具箱的一個受歡迎的補充。我現在已經在很多現實世界的例子中使用它,并且發現它是一種非常有用的方法來提供響應更快(更快速)的網站,因為否則必須從服務器中提取的數據現在可以在標記并在必要時使用。

總而言之,如果您堅持以下三個規則,那么您可以確保以最有效和語義的方式使用新屬性。

  1. 僅用于您網站/應用的內部使用。例如,它不應該在XML / RSS提要中用于外部網站或應用程序。

  2. 不要僅用于CSS樣式。

  3. 不要使用它來替換更具語義或適當性的現有屬性或元素。

既然您已經對HTML5數據屬性及其使用方式有了更深入的了解,我建議您立即開始在項目中實現它。

杭州做網站你有沒有在任何現實世界的例子中使用它?你用過什么場景?它是節省您的時間還是您希望通過此屬性擴展的任何內容?請在下面的評論中告訴我。

關鍵詞

最新案例

聯系電話 400-6065-301

留言

国产免费三级a在线观看 - 视频 - 在线播放 - 影视资讯 - 免费看