歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

HTML5 data-*自定義屬性詳解

發(fā)布時(shí)間：2018-04-18 15:12  回復(fù):0  查看:2704   最后回復(fù)：2018-04-18 15:12  
本文和大家分享的主要是HTML5 data-* 自定義屬性相關(guān)內(nèi)容，使用 用data- 作為前綴可以用來設(shè)置我么需要的自定義數(shù)據(jù)屬性，下面給大家介紹下具體操作，一起來看看吧，希望對大家 學(xué)習(xí)前端開發(fā)有所幫助。
　　使用此屬性可以存放一些我們所需要的數(shù)據(jù)，代碼如下:
　< a href = "javascript:" data-url = "softwhy.com" data-webname = " 螞蟻部落 " > 螞蟻部落 </ a >
　　上面代碼中，以data- 為前綴就是自定義數(shù)據(jù)屬性，屬性值就是存放的數(shù)據(jù)。
　　瀏覽器兼容:
　?。?/span>1 ） .IE8 和 IE8 以上瀏覽器支持此屬性。
　　（2 ） . 谷歌瀏覽器支持此屬性。
　?。?/span>3 ） . 火狐瀏覽器支持此屬性。
　?。?/span>4 ） .opera 瀏覽器支持此屬性。
　?。?/span>5 ） .safria 瀏覽器支持此屬性。
　　命名規(guī)則:
　?。?/span>1 ） . 數(shù)據(jù)屬性要以 data- 開頭。
　?。?/span>2 ） . 屬性名中的字符都是小寫，并且在前綴  "data-"  之后必須有至少一個(gè)字符。
　?。?/span>3 ） . 屬性值可以是任意字符串。
　　可以利用自定義屬性進(jìn)行css 匹配和相關(guān) javascript 操作。
使用自定義屬性作為選擇器代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title> 螞蟻部落 </title>
<style type="text/css">
a {
  display:block;
  width:100px;
height:50px;
  margin:10px;
  text-align:center;
  line-height:50px;
  background:#ccc;
}
a[data-webname=" 螞蟻部落 "] {
  color:red;
}
</style>
</head>
<body>
<a href="javascript:" data-webname=" 螞蟻部落 "> 螞蟻部落 </a>
<a href="javascript:" data-webname="antzone">softwhy.com</a>
</body>
</html>
　　上面的代碼就可以利用自定義屬性進(jìn)行匹配，設(shè)置元素的樣式。

您還未登錄，請先登錄

熱門帖子

最新帖子

?