欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面解析HTML5中的標(biāo)準(zhǔn)屬性與自定義屬性

CSDN   發(fā)布時間：2016-02-18 11:02:43   作者：夏夢竹   我要評論
這篇文章主要介紹了HTML5中的標(biāo)準(zhǔn)屬性與自定義屬性,文中也談到了JavaScript操作DOM時訪問自定義屬性的一些相關(guān)知識點(diǎn),非常推薦,需要的朋友可以參考下

正如 HTML5 語法中所闡述的，元素可以包含屬性（attributes）給一個元素設(shè)置各種屬性（properties）。

有些屬性被定義為全局的，可以用在任何元素上，而其他的被定義為元素特有的。所有的屬性都有一個名稱和一個值，看起來如下面的示例所示。

下面是一個使用 HTML5 屬性的例子，演示了如何用名為 class 的屬性和值 “example” 標(biāo)記一個 div 元素：

<div class="example">...</div>
屬性只能在起始標(biāo)簽中指定，絕對不能用在結(jié)束標(biāo)簽中。

HTML5 屬性不區(qū)分大小寫，可以全部大寫或者混合使用，盡管最常見的約定是始終使用小寫。

標(biāo)準(zhǔn)屬性
下面列出的屬性幾乎所有的 HTML5 標(biāo)簽都支持。

屬性 選項(xiàng) 功能
accesskey 用戶自定義 定義訪問元素的鍵盤快捷鍵。
align right, left, center 水平對齊標(biāo)簽。
background URL 在元素后面設(shè)置一個背景圖像。
bgcolor 數(shù)值，十六進(jìn)制值，RGB值 在元素后面設(shè)置一個背景顏色。
class 用戶定義。 分類一個元素，便于使用級聯(lián)樣式表。
contenteditable true, false 定義用戶是否可以編輯元素的內(nèi)容。
contextmenu Menu id 為元素定義上下文菜單。
data-XXXX 用戶定義。 自定義屬性。 HTML 文檔的作者可以定義自己的屬性。 自定義屬性必須以 "data-" 開頭。
draggable true,false, auto 定義用戶是否可以拖動元素。
height 數(shù)字值 定義表格，圖像或表格單元的高度。
hidden hidden 定義元素是否應(yīng)該可見。
id 用戶定義。 命名元素，便于使用級聯(lián)樣式表。
item 元素列表。 用于組合元素。
itemprop 條目列表。 用于組合條目。
spellcheck true, false 定義元素是否必須有拼寫或錯誤檢查。
style CSS 樣式表。 給元素定義內(nèi)聯(lián)樣式。
subject 用戶定義 id。 定義元素關(guān)聯(lián)的條目。
tabindex Tab number 定于元素的 tab 鍵順序。
title 用戶定義。 元素的“彈出”標(biāo)題。
valign top, middle, bottom HTML 元素內(nèi)標(biāo)簽的垂直對齊方式。
width 數(shù)字值。 定義表格，圖像和表格單元的寬度。

自定義屬性
HTML5 還引入了一個新特性，就是可以添加自定義的數(shù)據(jù)屬性。

自定義數(shù)據(jù)屬性以 data- 開頭，基于我們的需求命名。下面是一個簡單的例子：

<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中兩個叫做 data-subject 和 data-level 的自定義屬性在 HTML5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標(biāo)準(zhǔn)屬性類似的方式獲取它們的值。

在HTML元素中添加自定義屬性，通過JavaScript進(jìn)行訪問，如果你之前有嘗試過，你會發(fā)現(xiàn)，容易忽略標(biāo)記驗(yàn)證，而HTML5可以為你提供在有效的網(wǎng)頁內(nèi)創(chuàng)建并使用自己的元素屬性的功能。

創(chuàng)建HTML5文件：

如果你還沒想好要使用哪一個，可以復(fù)制下面的代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html   
  2. >  
  3.     
  4. <  
  5. html  
  6. >  
  7.     
  8. <  
  9. head  
  10. >  
  11.     
  12. <  
  13. script  
  14. >  
  15.     
  16. /*functions here*/     
  17. </  
  18. script  
  19. >  
  20.     
  21. </  
  22. head  
  23. >  
  24.     
  25. <  
  26. body  
  27. >  
  28.     
  29. </  
  30. body  
  31. >  
  32.     
  33. </  
  34. html  
  35. >  

 
在body中設(shè)置自定義元素，在head部分腳本區(qū)域利用JavaScript元素進(jìn)行訪問。

創(chuàng)建元素：

首先，添加一些簡單的內(nèi)容和自定義屬性以及ID等元素，以便我們能夠識別JavaScript示例。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <  
  2. div id="product1" data-product-category="clothing"  
  3. >  
  4.     
  5. Cotton Shirt     
  6. </  
  7. div  
  8. >  

 
正如你所看到的那樣，自定義屬性的形式為：“data-*”，在“data-”部分設(shè)定名稱或者你選定的名稱。在HTML5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗(yàn)證網(wǎng)頁是否有效可才采用這種方法。

當(dāng)然，項(xiàng)目細(xì)節(jié)部分決定了自定義屬性對你是否有用，以及該將其如何命名。這個示例可適用于不同產(chǎn)品類別的零售網(wǎng)站。

自定義屬性允許你以一種特殊的方式利用頁面內(nèi)的JavaScript代碼來設(shè)置元素，例如，動畫顯示功能。如果沒有標(biāo)準(zhǔn)的HTML元素，我們建議使用自定義屬性。

添加測試按鈕

在頁面上利用自身的JavaScript元素即可執(zhí)行事件，前提是將下面的代碼添加到頁面中：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <  
  2. input type="button" value="get attribute" onclick="getElementAttribute('product1')"  
  3. />  

 
獲取屬性：

在JavaScript中訪問屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區(qū)域添加以下函數(shù)：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. function getElementAttribute(elemID) {     
  2. var theElement = document.getElementById(elemID);     
  3. var theAttribute = theElement.getAttribute('data-product-category');     
  4. alert(theAttribute);     
  5. }   

這里，我們?yōu)槭纠黾恿薬lert 值，當(dāng)然你也可以根據(jù)自身需求在腳本中添加。

獲取數(shù)據(jù)：

你可以使用元素數(shù)據(jù)集來替代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，代碼通過多種屬性進(jìn)行迭代，然而，瀏覽器對數(shù)據(jù)集的支持依然非常低，所以牢記這一點(diǎn)，此代碼與//后面的方法一樣可執(zhí)行相同的進(jìn)程。

//var theAttribute = theElement.getAttribute('data-product-category'); 
var theAttribute = theElement.dataset.productCategory;
從屬性名稱開始在數(shù)據(jù)集中刪除“data-”，它仍然包含在HTML中。

請注意，如果你的自定義屬性名稱中有一個連字符，當(dāng)通過數(shù)據(jù)訪問時這會呈現(xiàn)出camel-case形式，即（“data-product-category” 變成“productCategory”)。

其他模塊、函數(shù)

我們已經(jīng)獲取該屬性，腳本仍然可以設(shè)置和刪除。下面的代碼演示了如何使用標(biāo)準(zhǔn)的JavaScript模塊和數(shù)據(jù)集來設(shè)置屬性。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. //DOM method       
  2.     
  3. theElement.setAttribute('data-product-category', 'sale');      
  4. //dataset version       
  5.     
  6. theElement.dataset.productCategory = "sale";     
  7. 你也可以使用DOM方法或者數(shù)據(jù)集來刪除某個屬性：   
  8.   
  9. //DOM method     
  10. theElement.removeAttribute('data-product-category');    
  11. //dataset version     
  12. theElement.dataset.productCategory = null;   

在HTML5中實(shí)現(xiàn)自定義屬性技術(shù)上并不是很復(fù)雜，真正困難的是選擇使用的方法是否適用于你的項(xiàng)目；如果適用，該如何使其更有效？請記住，現(xiàn)在啟用數(shù)據(jù)集方法作為頁面功能還為時尚早，畢竟很多瀏覽器暫不支持此功能。

相關(guān)文章

最新評論