杭州做网站:您须要领会的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

留言