亚博现金网

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

2019.08.02 mf_web

84

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

介绍

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

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>

TONGGUOTIGONGZHEIXIEZIDINGYISHUJUSHUXING,WOMENKEYIZHIXINGZHURUZAICHIXUSHIJIAN,JIEZOUHUOYISHUJIASHIYONGQIGUANLIANZHIZAIWOMENDEYINGYONGCHENGXUZHONGSOUSUO,GUOLVHUOFENZURENWU。

如何使用数据属性

SHUJUSHUXINGDEMINGCHENGBIXUYIZIFUCHUAN'data-'KAITOU,BINGQIEBIXUZAILIANZIFUHOUMIANBAOHANZHISHAOYIGESHIYONGRENHEHTMLMINGMINGYUEDINGDEZIFU。

亚博现金网SHUJUSHUXINGDEW3CGUIFANSHENGMING:

亚博现金网ZIDINGYISHUJUSHUXINGZHIZAIJIANGZIDINGYISHUJUCUNCHUWEIYEMIANHUOYINGYONGCHENGXUDESIYOUSHUJU,YINWEIMEIYOUGENGHESHIDESHUXINGHUOYUANSU。

亚博现金网ZHEIYIWEIZHEWOMENYINGGAIZHIZAIWOMENDEYINGYONGCHENGXUNEIBUSHIYONGGAISHUJU,TABUYINGGAIYONGYUXIANGWOMENDEYONGHUXIANSHIXINXI。TONGYANGZHONGYAODESHIYAOZHUYI,NINKEYIWEIJUYOURENHEZHIDEYUANSUFENPEIRENYISHULIANGDEZIDINGYISHUXING。

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

亚博现金网WOMENYIJINGKANGUONIRUHESHIYONGSHUJUSHUXING,DANWEILERANGNIQINGCHUDILIJIE,RANGWOMENZAIKANJIGELIZI。

亚博现金网XINGYUNDESHI,Webdesigntuts +YIJINGDUIYIXIEHAODEYONGLISHILIJINXINGLEXIANGXIJIESHAO。QIZHONGYIGEGUANJIANSHITONGGUOZAIMAOBIAOJIZHONGFENPEITONGZHIXIANGLAICHAKANRUHESHIYONGTAMENLAISHEZHIHEXIANSHICAIDANTONGZHIQIPAO。ZHEICIdataSHUXINGYONGYUZHISHITONGZHIQIPAODEQIPAOZHI。

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

亚博现金网ZAILINGYIGEKUAISUTISHIZHONG,WOMENHAIKEYIKANDAOTARUHEYONGZUOGONGJUTISHIDEBIAOJIDEYIBUFEN

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

CISHIJIANYONGYUXIANSHIGONGJUTISHIDEWENBEN。

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

亚博现金网WOMENBUYINGGAIWEIYIJINGJIANLIHUOGENGHESHIDESHUXINGSHIYONGSHUJUSHUXING。LIRU,SHIYONGTASHIBUHESHIDE:

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

DANGWOMENKEYIdatetimeZAItimeRUXIAYUANSUZHONGSHIYONGYIDINGYIDESHUXINGSHI:

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

亚博现金网SHUJUSHUXINGBUYINGYONGZUOYUANSHUJUHUOWEIGESHIDETIDAI。WEIGESHIZHUYAOSHIWEIRENLEISHEJIDE,BINGQIESHIWEILEJICHUWOMENDEBIAOJISHANGXIAWENERYINRUDE。LIRU,RUGUONINYOUYIGEVcardTIGONGYOUGUANGERENHUOZUZHIDELIANXIXINXI,NEIMENINKEYIJITAYILEI“vcard”,RANGJIQILEJIEZHEISHILIANXIXINXI。

SHIYONGWEIGESHI,NIYINGGAISHIYONGNIDEBIAOJI

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

亚博现金网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);
}

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

使用数据属性使用jQuery

亚博现金网XIANZAIWOMENYIJINGLEJIELERUHESHIYONGCSSSHIYONGdataSHUXINGLAIDINGWEIYUANSU,RANGWOMENKANYIXIARUHESHIYONGjQueryHUOQUSHUJU。

亚博现金网ZHUYI:CHULISHUJUCHAOCHULEBENJIAOCHENGDEFANWEI,YINWEIBENJIAOCHENGZHUANMENZHENDUIQIANDUANKAIFARENYUANHESHEJIRENYUAN。

WOMENKEYITONGGUOJIZHONGFANGFASHIYONGjQueryCONGYUANSUZHONGHUOQUSHUJU。RANGWOMENLAIKANKANQIZHONGDEYIXIE。

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

RUGUOWOMENYOUYIGEMAOBIAOJI,JIUXIANGSHANGMIANNEIGE,TAJUYOUdata-infoDESHUJUSHUXING,NEIMEWOMENKEYIXIANGHUOQURENHEQITASHUXINGZHIYIYANGFANGWENGAISHUJU。

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

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);
 });

亚博现金网RANHOU,SHANGMIANDESHILIJIANG“bar”JILUDAOKONGZHITAIRIZHIZHONG。

跨浏览器支持

WOZHIDAOZAINISHIYONGZHEIGEXINSHUXINGZHIQIAN,NIHUIXIANGZHIDAONAXIELIULANQIZHICHITAYIJISHENMESHIHOUKEYIKAISHISHIYONGTA。HAOXIAOXISHITAZAISUOYOUXIANDAILIULANQIZHONGDEDAOLEHENHAODEZHICHI。RENHEZHICHIHTMLDEDONGXIDOUKEYIFANGWENSHUJUSHUXING。RUGUONINZHENGZAISHIYONGGAISHUXINGJINXINGYANGSHISHEZHIYIJIFANGWENSHUJU(QINGJINSHENSHIYONG),NEIMELIULANQIJIANGXUYAOZHICHICSS3XUANZEQI。

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. 亚博现金网JINYONGYUNINWANGZHAN/YINGYONGDENEIBUSHIYONG。LIRU,TABUYINGGAIZAIXML / RSSTIYAOZHONGYONGYUWAIBUWANGZHANHUOYINGYONGCHENGXU。

  2. BUYAOJINYONGYUCSSYANGSHI。

  3. BUYAOSHIYONGTALAITIHUANGENGJUYUYIHUOSHIDANGXINGDEXIANYOUSHUXINGHUOYUANSU。

JIRANNINYIJINGDUIHTML5SHUJUSHUXINGJIQISHIYONGFANGSHIYOULEGENGSHENRUDELEJIE,WOJIANYININLIJIKAISHIZAIXIANGMUZHONGSHIXIANTA。

HANGZHOUZUOWANGZHANNIYOUMEIYOUZAIRENHEXIANSHISHIJIEDELIZIZHONGSHIYONGTA?NIYONGGUOSHENMECHANGJING?TASHIJIESHENGNINDESHIJIANHAISHININXIWANGTONGGUOCISHUXINGKUOZHANDERENHENEIRONG?QINGZAIXIAMIANDEPINGLUNZHONGGAOSUWO。

ZUIXINANLI

联系电话 400-6065-301

JIANZHANZIXUN XINGZONGJIAN

TOUSU