全面解析HTML5中的標準屬性與自定義屬性

2020-03-24 17:28:30

字體：大中小

來源：轉載

供稿：網友

正如 HTML5 語法中所闡述的，元素可以包含屬性（attributes）給一個元素設置各種屬性（properties）。有些屬性被定義為全局的，可以用在任何元素上，而其他的被定義為元素特有的。所有的屬性都有一個名稱和一個值，看起來如下面的示例所示。下面是一個使用 HTML5 屬性的例子，演示了如何用名為 html' target='_blank'>class 的屬性和值 example 標記一個 div 元素： div >屬性只能在起始標簽中指定，絕對不能用在結束標簽中。HTML5 屬性不區分大小寫，可以全部大寫或者混合使用，盡管最常見的約定是始終使用小寫。標準屬性
下面列出的屬性幾乎所有的 HTML5 標簽都支持。

用戶定義。自定義屬性。 HTML 文檔的作者可以定義自己的屬性。自定義屬性必須以 data- 開頭。
自定義屬性
HTML5 還引入了一個新特性，就是可以添加自定義的數據屬性。自定義數據屬性以 data- 開頭，基于我們的需求命名。下面是一個簡單的例子： div >...
/div
上面的例子中兩個叫做 data-subject 和 data-level 的自定義屬性在 HTML5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標準屬性類似的方式獲取它們的值。在HTML元素中添加自定義屬性，通過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而HTML5可以為你提供在有效的網頁內創建并使用自己的元素屬性的功能。創建HTML5文件：如果你還沒想好要使用哪一個，可以復制下面的代碼：
XML/HTML Code復制內容到剪貼板

在body中設置自定義元素，在head部分腳本區域利用JavaScript元素進行訪問。創建元素：首先，添加一些簡單的內容和自定義屬性以及ID等元素，以便我們能夠識別JavaScript示例。
XML/HTML Code復制內容到剪貼板

正如你所看到的那樣，自定義屬性的形式為： data-* ，在 data- 部分設定名稱或者你選定的名稱。在HTML5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗證網頁是否有效可才采用這種方法。當然，項目細節部分決定了自定義屬性對你是否有用，以及該將其如何命名。這個示例可適用于不同產品類別的零售網站。自定義屬性允許你以一種特殊的方式利用頁面內的JavaScript代碼來設置元素，例如，動畫顯示功能。如果沒有標準的HTML元素，我們建議使用自定義屬性。添加測試按鈕在頁面上利用自身的JavaScript元素即可執行事件，前提是將下面的代碼添加到頁面中：XML/HTML Code復制內容到剪貼板
inputtype= button value= getattribute onclick= getElementAttribute('product1') /

獲取屬性：在JavaScript中訪問屬性最常用的方法是使用 getAttributes ，這也是我們要做的第一步。在頁面的head腳本區域添加以下函數：JavaScript Code復制內容到剪貼板
functiongetElementAttribute(elemID){ vartheElement=document.getElementById(elemID); vartheAttribute=theElement.getAttribute('data-product-category'); alert(theAttribute); }
這里，我們為示例增加了alert 值，當然你也可以根據自身需求在腳本中添加。獲取數據：你可以使用元素數據集來替代DOM getAttributes ，這或許更有效，尤其是在某種情況下，代碼通過多種屬性進行迭代，然而，瀏覽器對數據集的支持依然非常低，所以牢記這一點，此代碼與//后面的方法一樣可執行相同的進程。//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
從屬性名稱開始在數據集中刪除 data- ，它仍然包含在HTML中。請注意，如果你的自定義屬性名稱中有一個連字符，當通過數據訪問時這會呈現出camel-case形式，即（ data-product-category 變成 productCategory )。其他模塊、函數我們已經獲取該屬性，腳本仍然可以設置和刪除。下面的代碼演示了如何使用標準的JavaScript模塊和數據集來設置屬性。JavaScript Code復制內容到剪貼板
theElement.setAttribute('data-product-category','sale'); //datasetversion theElement.dataset.productCategory= sale ; 你也可以使用DOM方法或者數據集來刪除某個屬性： //DOMmethod theElement.removeAttribute('data-product-category'); //datasetversion theElement.dataset.productCategory=null;
在HTML5中實現自定義屬性技術上并不是很復雜，真正困難的是選擇使用的方法是否適用于你的項目；如果適用，該如何使其更有效？請記住，現在啟用數據集方法作為頁面功能還為時尚早，畢竟很多瀏覽器暫不支持此功能。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：諾基亞 XHTML 常見問答

下一篇：用HTML5制作數字時鐘的教程