【HTML5】'data-'屬性的作用是什麼?

阿新 • • 發佈：2019-01-21

可能大家在使用jquery mobile時，經常會看到data-role、data-theme等的使用，比如：通過如下程式碼即可實現頁首的效果：

<div data-role="header"> 
    <h1>我是標題</h1> 
</div>

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

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

我們寫一個html頁面，自定義一個data-chb="header"的屬性，希望具備這個屬性的div區域背景顏色為黑色，文字為白色，居中顯示；不具備data-chb自定義屬性的div按照預設方式顯示，html程式碼如下：

<body> 
  <div data-chb="header"> 
    <h1>我是使用了data-chb自定義屬性的div</h1> 
  </div> 
  <br/> 
  <div> 
    我沒有使用data-chb自定義屬性，該怎麼展現就怎麼展現； 
  </div> 
</body>

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

<style> 
 .ui_header { 
  background-color: black; 
  text-align: center; 
  color:white; 
  border:1px solid #000; 
} 
</style>

然後我們通過如下js方法實現在頁面載入時，動態新增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"]; 
             //如果是我們預先定義好的header值，表示需要處理 
             if(customAttr=="header"){ 
                //新增樣式 
                elem.setAttribute("class","ui_header"); 
             } 
          } 
      } 
  } 
</script>

【HTML5】'data-'屬性的作用是什麼?

可能大家在使用jquery mobile時，經常會看到data-role、data-theme等的使用，比如：通過如下程式碼即可實現頁首的效果：<div data-role="header"> <h1>我是標題</h1> &l

【HTML5】全域性屬性

新增的全域性元素： 1、contenteditable屬性一段可編輯的段落： <p contenteditable="true">這是一個可編輯的段落。</p> 註釋：

【轉】中斷的作用

頁面發生 call 由於 pan con sys_call 都是 handle 來源：CSDN 鏈接：http://blog.csdn.net/keyue123/article/details/16959111 所有的事物都是依靠中斷來解決問題的。計算機更是如此，依靠

【HTML5】頁面點擊按鈕添加一行刪除一行全選反選全不選

input 遍歷 ble 操作 warn clas type pre pen 頁面點擊按鈕添加一行刪除一行全選反選全不選頁面效果圖如下 html頁面代碼 <!DOCTYPE html> <html>

【CSS3】css屬性之——background

wid css屬性 posit attach 樣式 ash ack com ref 一、background設置一個元素的背景樣式語法格式：background: color position size repeat origin clip attachment imag

【Python】【元編程】【一】動態屬性和特性

class join write msg pen mut quest pin sys #19.1 使用動態屬性轉換數據"""#栗子19-2 osconfeed.py：下載 osconfeed.jsonfrom urllib.request import urlopenimp

【轉】cookie的作用域

以及 tro http href 限制當前 detail main.c ron Cookie的作用域：Domain為設置Cookie的有效域，Path限制有效路徑 Domain為設置Cookie的有效域，Path限制有效路徑，如以下幾種情況： 1.最大可能的作用域 y

【轉載】servlet三大作用域：request，session，application

javaweb開發中Servlet三大域物件的應用（request、session、application（ServletContext））。 1. requestrequest是表示一個請求，只要發出一個請求就會建立一個request，它的作用域：僅在當前請求中有效。用處：常用於伺服器間同一請求不同頁面之

【筆記】浮動屬性float的應用08——液體兩列布局（所有步驟組合在一起）

第1步 - 從語義標記的程式碼開始要將頁面佈置為兩列，您需要從基本頁面結構開始。在這種情況下，我們將使用一些虛擬內容來建立兩列模板。該頁面已被分為五個獨立的div，每個div都被賦予一個唯一的ID選擇器。div被標記; “容器”（包裹整個頁面的內容），“top”（用於頂部橫幅），“l

【筆記】浮動屬性float的應用08——液體兩列布局

第1步 - 從語義標記的程式碼開始要將頁面佈置為兩列，您需要從基本頁面結構開始。在這種情況下，我們將使用一些虛擬內容來建立兩列模板。頁面已分為五個單獨的div，每個div都有一個唯一的ID選擇器。div被標記; “容器”（包裹整個頁面的內容），“top”（用於頂部橫幅），“leftn

【筆記】浮動屬性float的應用07——浮動可縮放的首字下沉（所有步驟組合在一起）

第1步 - 從一段文字開始在本練習中，我們希望強制將一個下降帽放在一段文字旁邊。我們還希望丟棄上限是可擴充套件的，無論使用者的預設字型大小如何 - 這意味著所有測量都將以ems或百分比表示。從一段簡單的文字開始。第2步 - 在第一個字母周圍新增一個範圍將規則應用於第一個字母有兩種方

【筆記】浮動屬性float的應用07——浮動可縮放的首字下沉

第1步 - 從一段文字開始在本練習中，我們希望強制將一個下降帽放在一段文字旁邊。我們還希望丟棄上限是可擴充套件的，無論使用者的預設字型大小如何 - 這意味著所有測量都將以ems或百分比表示。從一段簡單的文字開始。程式碼如下所示： <!DOCTYPE html> <h

【筆記】浮動屬性float的應用06——浮動內聯列表項（所有步驟組合在一起）

第1步 - 從簡單的無序列表開始在本練習中，我們想要一個簡單的無序列表並將其轉換為水平導航欄。我們將從一個簡單的無序列表開始。UL使用ID選擇器（id =“navigation”）設定樣式，並且兩個LI使用類選擇器（class =“left”和class =“right”）設定樣式。這裡

【筆記】浮動屬性float的應用06——浮動內聯列表項

第1步 - 從簡單的無序列表開始在本練習中，我們想要一個簡單的無序列表並將其轉換為水平導航欄。我們將從一個簡單的無序列表開始。UL使用ID選擇器（id =“navlist”）進行樣式設定。在本教程中，使用了一個明顯的名稱來幫助說明這一點，但可以使用任何名稱。但是，最好根據類別的含義來命名

【筆記】浮動屬性float的應用05——使用列表浮動下一個和後一個按鈕（所有步驟組合在一起）

第1步 - 從一段文字和一個列表開始在本練習中，我們希望向左浮動一個“後退”按鈕，在右側浮動一個“下一步”按鈕。我們可以使用兩個div，但為了簡單起見，我們將使用兩個列表項。我們將從一段文字和一個簡單列表開始。UL使用ID選擇器（id =“navigation”）設定樣式，並且兩個LI使

【筆記】浮動屬性float的應用05——使用列表浮動下一個和後一個按鈕

【筆記】浮動屬性float的應用04—浮動影象縮圖庫（所有步驟組合在一起）

第1步 - 從一些縮圖和標題開始在本練習中，我們希望將所有縮圖移動到行中，例如表格單元格。我們將要使用的方法允許任意數量的影象彼此相鄰，具體取決於包含框的寬度。從6個影象和標題開始，每個影象和標題都在自己的div中。這些div都被賦予了一個名為“thumbnail”的類。第2步 -

【筆記】浮動屬性float的應用04——浮動影象縮圖庫

第1步 - 從一些縮圖和標題開始在本練習中，我們希望將所有縮圖移動到行中，例如表格單元格。我們將要使用的方法允許任意數量的影象彼此相鄰，具體取決於包含框的寬度。從6個影象和標題開始，每個影象和標題都在自己的div中。這些div都被賦予了一個名為“thumbnail”的類。最好根據類別的含

【筆記】浮動屬性float的應用03——浮動一系列“清晰：右”影象（所有步驟一起結合）

第1步 - 從一段文字和一系列圖片開始對於本練習，我們希望將影象強制到右側以允許內容與它們一起流動。我們還想在影象的左側和底側新增邊距以推送內容。我們還希望影象在右邊緣上方堆疊在一起。類選擇器 - “floatright” - 已應用於每個影象。這裡可以使用任何名稱。第2步 - 將

【筆記】浮動屬性float的應用03——浮動一系列“清晰：右”影象

第1步 - 從一段文字和一系列圖片開始對於本練習，我們希望將影象強制到右側以允許內容與它們一起流動。我們還想在影象的左側和底側新增邊距以推送內容。我們還希望影象在右邊緣上方堆疊在一起。類選擇器已應用於每個影象。我們使用名稱“floatright”來幫助說明這一點，但可以使用任何名稱。但是

【HTML5】'data-'屬性的作用是什麼?

相關推薦