AG体育

杭州做网站:您需要了解的HTML5数据属性

2019.08.02 mf_web

84

HTML5数据属性允许您将自定义数据分配给元素。本文介绍了如何使用它,并提供了理想情况下使用它的示例。杭州做网站

介绍

AG体育ZAIHTML5ZHIQIAN,WOMENBUDEBUYILAIYUSHIYONG“class”HUO“rel”SHUXINGLAICUNCHUWOMENKEYIZAIWANGZHANZHONGSHIYONGDEXIAOSHUJUPIANDUAN。ZHEIYOUSHIHUIDAOZHIWENTI,BINGKENENGDAOZHIWANGZHANDEYANGSHIHEGONGNENGZHIJIANFASHENGCHONGTU。HTML5DECHUXIANYINRULEYIGECHENGWEI“SHUJU”DEXINSHUXING。ZAIBENWENZHONG,WOJIANGTAOLUNYIXIERUHESHIYONGCISHUXINGYIJIRUHEZHENGQUESHIYONGTADESHILI。

AG体育SUIZHEWANGZHANYUELAIYUESHOUSHUJUQUDONGHEYINGYONGCHENGXUDEYINGXIANG,TAMENKAISHIZHANGWOGENGDUOYOUGUANTEDINGYUANSUDESHUJU。LIRU,RUGUOWOMENZHENGZAICHUANGJIANYIGEYINPINYINGYONGCHENGXU。WOMENKENENGYOUBIAOZHUNDEBIAOJI,LIRU:

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

SHANGSHUBIAOJISHIWANQUANKEYIJIESHOUDE,DANYOUSHIWOMENKENENGXIWANGCUNCHUCHUYUANYIWAIDEMEIGEGUIDAODEGENGDUOXINXI。LIRU,WOMENKENENGXIWANGNENGGOUFENPEIQITATEDINGDEQUMUXINXI,LIRUCHIXUSHIJIAN,JIEZOUHEYISHUJIA。WOMENKEYITONGGUOWEIMEIGEYINPINYUANFENPEIZIDINGYISHUJUSHUXINGLAISHIXIANCIMUDE,LIRU:

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

AG体育TONGGUOTIGONGZHEIXIEZIDINGYISHUJUSHUXING,WOMENKEYIZHIXINGZHURUZAICHIXUSHIJIAN,JIEZOUHUOYISHUJIASHIYONGQIGUANLIANZHIZAIWOMENDEYINGYONGCHENGXUZHONGSOUSUO,GUOLVHUOFENZURENWU。

如何使用数据属性

SHUJUSHUXINGDEMINGCHENGBIXUYIZIFUCHUAN'data-'KAITOU,BINGQIEBIXUZAILIANZIFUHOUMIANBAOHANZHISHAOYIGESHIYONGRENHEHTMLMINGMINGYUEDINGDEZIFU。

SHUJUSHUXINGDEW3CGUIFANSHENGMING:

ZIDINGYISHUJUSHUXINGZHIZAIJIANGZIDINGYISHUJUCUNCHUWEIYEMIANHUOYINGYONGCHENGXUDESIYOUSHUJU,YINWEIMEIYOUGENGHESHIDESHUXINGHUOYUANSU。

AG体育ZHEIYIWEIZHEWOMENYINGGAIZHIZAIWOMENDEYINGYONGCHENGXUNEIBUSHIYONGGAISHUJU,TABUYINGGAIYONGYUXIANGWOMENDEYONGHUXIANSHIXINXI。TONGYANGZHONGYAODESHIYAOZHUYI,NINKEYIWEIJUYOURENHEZHIDEYUANSUFENPEIRENYISHULIANGDEZIDINGYISHUXING。

我应该何时使用数据属性?

WOMENYIJINGKANGUONIRUHESHIYONGSHUJUSHUXING,DANWEILERANGNIQINGCHUDILIJIE,RANGWOMENZAIKANJIGELIZI。

XINGYUNDESHI,Webdesigntuts +YIJINGDUIYIXIEHAODEYONGLISHILIJINXINGLEXIANGXIJIESHAO。QIZHONGYIGEGUANJIANSHITONGGUOZAIMAOBIAOJIZHONGFENPEITONGZHIXIANGLAICHAKANRUHESHIYONGTAMENLAISHEZHIHEXIANSHICAIDANTONGZHIQIPAO。ZHEICIdataSHUXINGYONGYUZHISHITONGZHIQIPAODEQIPAOZHI。

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

AG体育ZAILINGYIGEKUAISUTISHIZHONG,WOMENHAIKEYIKANDAOTARUHEYONGZUOGONGJUTISHIDEBIAOJIDEYIBUFEN

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

CISHIJIANYONGYUXIANSHIGONGJUTISHIDEWENBEN。

我什么时候不应该使用数据属性?

AG体育WOMENBUYINGGAIWEIYIJINGJIANLIHUOGENGHESHIDESHUXINGSHIYONGSHUJUSHUXING。LIRU,SHIYONGTASHIBUHESHIDE:

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

DANGWOMENKEYIdatetimeZAItimeRUXIAYUANSUZHONGSHIYONGYIDINGYIDESHUXINGSHI:

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

AG体育SHUJUSHUXINGBUYINGYONGZUOYUANSHUJUHUOWEIGESHIDETIDAI。WEIGESHIZHUYAOSHIWEIRENLEISHEJIDE,BINGQIESHIWEILEJICHUWOMENDEBIAOJISHANGXIAWENERYINRUDE。LIRU,RUGUONINYOUYIGEVcardTIGONGYOUGUANGERENHUOZUZHIDELIANXIXINXI,NEIMENINKEYIJITAYILEI“vcard”,RANGJIQILEJIEZHEISHILIANXIXINXI。

AG体育SHIYONGWEIGESHI,NIYINGGAISHIYONGNIDEBIAOJI

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

AG体育ERBUSHISHIYONGSHUJUSHUXING,RU

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

YAOLEJIEYOUGUANWEIGESHIDEGENGDUOXINXI,QINGFANGWENMircorformats.org。

使用CSS的数据属性

YIDANWOMENZAIHTMLBIAOJIZHONGSHIXIANLESHUJUSHUXING,WOMENJIUKEYISHIYONGCSSLAIDINGWEITAMEN。ZHONGYAODESHIYAOZHUYI,BUYINGGAIZHIJIESHIYONGSHUJUSHUXINGLAISHIYONGYANGSHI,JINGUANZAIMOUXIEQINGKUANGXIATAKENENGSHIHESHIDE。ZAICSSZHONGDINGWEISHUJUSHUXINGYUDINGWEIQITASHUXINGLEISI,NINKEYIXIANGXIAMIANZHEIYANGSHIYONGTAMEN:

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

LIRU,RUGUONINYAOCHUANGJIANKUASHEBEIYOUHAODEWANGZHANHUOYINGYONGCHENGXU,NEIMENINKENENGXIWANGDINGWEIYIXIENINZHIYINGZAIYIDONGSHEBEISHANGCHAKANDETEDINGNEIRONG。CAIQUYIXIABIAOJI

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

SHIYONGCSS,NINKEYIZAIZHUOMIANSHANGCHAKANSHIYINZANGSUOYOUJINXIANYIDONGSHEBEIDEYEMIAN。

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

SUIRANBUJIANYIJIYUCHAKANSHEBEIYINZANGNEIRONG,DANKENENGCUNZAISHIHEDEQINGKUANG。NINYINGGAIGENJUMEIGEJUTIQINGKUANGHEANLILAIQUEDINGZHEIYIDIAN。

YEKEYISHIYONGSHUXINGZHONGDESHUJUBINGTONGGUOCSSXIANSHITA。JINGUANGUIFANSHUONINBUYINGGAISHIYONGZIDINGYISHUXINGZHONGDESHUJUXIANGYONGHUXIANSHI,DANSHIZAIMOUXIEQINGKUANGXIAKENENGSHIZUIHAODEFANGFA。ZHEIJIUSHITADESHIXIANFANGSHI。

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

ZAICSSZHONG,NINJIANGSHIYONG':after'WEIYUANSU(HUOQITAYIXIESHENGCHENGDENEIRONG)BINGJIANGGAISHUXINGYONGZUO'after'NEIRONGDEYIBUFEN,RUXIASUOSHI:

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

AG体育RANHOU,ZHEIJIANGZAI'.text'divZHONGXIANSHI'This is the div content'。 

使用数据属性使用jQuery

AG体育XIANZAIWOMENYIJINGLEJIELERUHESHIYONGCSSSHIYONGdataSHUXINGLAIDINGWEIYUANSU,RANGWOMENKANYIXIARUHESHIYONGjQueryHUOQUSHUJU。

AG体育ZHUYI:CHULISHUJUCHAOCHULEBENJIAOCHENGDEFANWEI,YINWEIBENJIAOCHENGZHUANMENZHENDUIQIANDUANKAIFARENYUANHESHEJIRENYUAN。

WOMENKEYITONGGUOJIZHONGFANGFASHIYONGjQueryCONGYUANSUZHONGHUOQUSHUJU。RANGWOMENLAIKANKANQIZHONGDEYIXIE。

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

AG体育RUGUOWOMENYOUYIGEMAOBIAOJI,JIUXIANGSHANGMIANNEIGE,TAJUYOUdata-infoDESHUJUSHUXING,NEIMEWOMENKEYIXIANGHUOQURENHEQITASHUXINGZHIYIYANGFANGWENGAISHUJU。

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

AG体育NINKEYITONGGUOZAIWebJIANCHAQIZHONGDAKAIjsKONGZHITAI,RANHOUDIANJILIANJIELAICESHITA。

GUANYUdataSHUXINGDEHAOCHUSHIWOMENYEKEYISHIYONGTALAITIGONGZHEIYANGDEjsonSHUJU。

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

SHIYONGjQueryWOMENKEYISHIYONGjQueryDESHUJUDUIXIANGFANGFAHUOQUZHEIXIESHUJU。

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

AG体育RANHOU,SHANGMIANDESHILIJIANG“bar”JILUDAOKONGZHITAIRIZHIZHONG。

跨浏览器支持

AG体育WOZHIDAOZAINISHIYONGZHEIGEXINSHUXINGZHIQIAN,NIHUIXIANGZHIDAONAXIELIULANQIZHICHITAYIJISHENMESHIHOUKEYIKAISHISHIYONGTA。HAOXIAOXISHITAZAISUOYOUXIANDAILIULANQIZHONGDEDAOLEHENHAODEZHICHI。RENHEZHICHIHTMLDEDONGXIDOUKEYIFANGWENSHUJUSHUXING。RUGUONINZHENGZAISHIYONGGAISHUXINGJINXINGYANGSHISHEZHIYIJIFANGWENSHUJU(QINGJINSHENSHIYONG),NEIMELIULANQIJIANGXUYAOZHICHICSS3XUANZEQI。

AG体育GENGHAODEXIAOXISHI,SUOYOULIULANQI(SHENZHISHIIE7)DOUYUNXUNIZAIYUANSUSHANGSHIYONGdata- *SHUXING,RUGUONISHIYONGDESHIjQuery 1.4HUOGENGGAOBANBEN,NEIMENIKEYISHIYONGjQueryDESHUJUDUIXIANGFANGWENSHUJU。DANSHI,RUGUONINZHISHISHIYONGJavaScript,ZEBIXUSHIYONGJavaScriptDE“getAttribute”FANGFAFANGWENSHUJU。

YOUGUANSHUJUJIDEWANZHENGLIEBIAOZHICHI,NINKEYICHAKANcanIuse.com。

结论

SUIZHEWANGZHANHEWANGLUOYINGYONGCHENGXUBIANDEYUELAIYUEFUZABINGKAISHIBAOCUNGENGDUOXINXIHESHUJU,ZHEIGEXINSHUXINGJUEDUISHIGONGJUXIANGDEYIGESHOUHUANYINGDEBUCHONG。WOXIANZAIYIJINGZAIHENDUOXIANSHISHIJIEDELIZIZHONGSHIYONGTA,BINGQIEFAXIANTASHIYIZHONGFEICHANGYOUYONGDEFANGFALAITIGONGXIANGYINGGENGKUAI(GENGKUAISU)DEWANGZHAN,YINWEIFOUZEBIXUCONGFUWUQIZHONGTIQUDESHUJUXIANZAIKEYIZAIBIAOJIBINGZAIBIYAOSHISHIYONG。

ZONGERYANZHI,RUGUONINJIANCHIYIXIASANGEGUIZE,NEIMENINKEYIQUEBAOYIZUIYOUXIAOHEYUYIDEFANGSHISHIYONGXINSHUXING。

  1. AG体育JINYONGYUNINWANGZHAN/YINGYONGDENEIBUSHIYONG。LIRU,TABUYINGGAIZAIXML / RSSTIYAOZHONGYONGYUWAIBUWANGZHANHUOYINGYONGCHENGXU。

  2. AG体育BUYAOJINYONGYUCSSYANGSHI。

  3. BUYAOSHIYONGTALAITIHUANGENGJUYUYIHUOSHIDANGXINGDEXIANYOUSHUXINGHUOYUANSU。

AG体育JIRANNINYIJINGDUIHTML5SHUJUSHUXINGJIQISHIYONGFANGSHIYOULEGENGSHENRUDELEJIE,WOJIANYININLIJIKAISHIZAIXIANGMUZHONGSHIXIANTA。

AG体育HANGZHOUZUOWANGZHANNIYOUMEIYOUZAIRENHEXIANSHISHIJIEDELIZIZHONGSHIYONGTA?NIYONGGUOSHENMECHANGJING?TASHIJIESHENGNINDESHIJIANHAISHININXIWANGTONGGUOCISHUXINGKUOZHANDERENHENEIRONG?QINGZAIXIAMIANDEPINGLUNZHONGGAOSUWO。

ZUIXINANLI

联系电话 400-6065-301

JIANZHANZIXUN XINGXING-ZONGJIAN

TOUSU