您好,登錄后才能下訂單哦!
請求超時(shí)!
小編給大家分享一下HTML5中'data-'屬性有什么用,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在大家查看HTML時(shí),經(jīng)常會(huì)看到data-role、data-theme等的使用,比如:通過如下代碼即可實(shí)現(xiàn)頁眉的效果:
<div data-role="header"> <h2>我是標(biāo)題</h2> </div>
為什么寫一個(gè)data-role="header"就能實(shí)現(xiàn)底部為黑色、文字居中顯示的效果呢?
data-role="header"
本文提供一種最簡單的實(shí)現(xiàn)辦法,讓大家對這些用法有個(gè)直觀的了解。
我們寫一個(gè)html頁面,自定義一個(gè)data-chb="header"的屬性,希望具備這個(gè)屬性的div區(qū)域背景顏色為黑色,文字為白色,居中顯示;不具備data-chb自定義屬性的div按照默認(rèn)方式顯示,html代碼如下:
<body> <div data-chb="header"> <h2>我是使用了data-chb自定義屬性的div</h2> </div> <br/> <div> 我沒有使用data-chb自定義屬性,該怎么展現(xiàn)就怎么展現(xiàn); </div> </body>
要想實(shí)現(xiàn)"背景顏色為黑色,文字為白色,居中顯示"的顯示效果,我們定義如下的css:
<style> .ui_header { background-color: black; text-align: center; color:white; border:1px solid #000; } </style>
然后我們通過如下js方法實(shí)現(xiàn)在頁面加載時(shí),動(dòng)態(tài)添加css定義,改變具備data-chb屬性的div的顯示樣式:
<script type="text/javascript"> window.onload=function(){ var elems = document.getElementsByTagName("div"); if(elems!=null&&elems.length>0){ var length = elems.length; //遍歷所有DIV控件 for(var i=0;i<length;i++){ var elem = elems[i]; //獲取該控件的自定義屬性 var customAttr = elem.dataset.chb; //也可以通過如下方式獲得自定義屬性 //var customAttr = elem.dataset["chb"]; //如果是我們預(yù)先定義好的header值,表示需要處理 if(customAttr=="header"){ //添加樣式 elem.setAttribute("class","ui_header"); } } } } </script>
當(dāng)然此屬性除了以上作用外,還有其他作用,如通過JS來構(gòu)造數(shù)據(jù),填充數(shù)據(jù)等;
看完了這篇文章,相信你對“HTML5中'data-'屬性有什么用”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
Copyright ? Yisu Cloud Ltd. All Rights Reserved. 2018 版權(quán)所有
廣州億速云計(jì)算有限公司粵ICP備17096448號(hào)-1 粵公網(wǎng)安備 44010402001142號(hào)增值電信業(yè)務(wù)經(jīng)營許可證編號(hào):B1-20181529