【轉載】HTML5自定義data屬性

時間 2019-11-08

標籤轉載 html5 html 自定義 data 屬性欄目 HTML5 简体版

原文原文鏈接

可能你們在使用jquery mobile時，常常會看到data-role、data-theme等的使用，好比：經過以下代碼便可實現頁眉的效果：

[html]

</div>

爲何寫一個data-role="header"就能實現底部爲黑色、文字居中顯示的效果呢？

本文提供一種最簡單的實現辦法，讓你們對這些用法有個直觀的瞭解。

咱們寫一個html頁面，自定義一個data-chb="header"的屬性，但願具有這個屬性的div區域背景顏色爲黑色，文字爲白色，居中顯示；不具有data-chb自定義屬性的div按照默認方式顯示，html代碼以下：

[html]

<body>

<h1>我是使用了data-chb自定義屬性的div</h1>

</div>

<br/>

<div>

我沒有使用data-chb自定義屬性，該怎麼展示就怎麼展示；

</div>

</body>

要想實現"背景顏色爲黑色，文字爲白色，居中顯示"的顯示效果，咱們定義以下的css：

[css]

<style>

.ui_header {

background-color: black;

text-align: center;

color:white;

border:1px solid #000;

}

</style>

而後咱們經過以下js方法實如今頁面加載時，動態添加css定義，改變具有data-chb屬性的div的顯示樣式：

[javascript]

window.onload=function(){

var elems = document.getElementsByTagName_r("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"];

//若是是咱們預先定義好的header值，表示須要處理

if(customAttr=="header"){

//添加樣式

elem.setAttribute("class","ui_header");

}

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。