如何設(shè)置HTML自定義屬性

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

創(chuàng)新互聯(lián)建站是一家以網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、品牌設(shè)計、軟件運維、seo優(yōu)化、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計為成都假山制作等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

一，創(chuàng)建HTML5文件：

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

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

二，創(chuàng)建元素：

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

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

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

三，添加測試按鈕

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

四，獲取屬性：

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

這里，為示例增加了alert?值，當然也可以根據(jù)自身需求在腳本中添加。

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

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

從屬性名稱開始在數(shù)據(jù)集中刪除“data-”，它仍然包含在HTML中。

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

六，其他模塊、函數(shù)

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

html5 自定義屬性需要以data開始嗎

所謂data-*實際上上就是data-前綴加上自定義的屬性名，使用這樣的結(jié)構(gòu)可以進行數(shù)據(jù)存放。使用data-*可以解決自定義屬性混亂無管理的現(xiàn)狀。確切的說data-*并不是自定義屬性，而是解決自定義屬性的一種方案。因為大部分自定義屬性都是為了在標簽上存儲數(shù)據(jù)。

data-*里存儲的內(nèi)容可以使用JavaScript語言直接讀取。相比不用data-*自定義屬性更容易讀取和存儲。

data-*可以大大提高工作效率，例如ajax請求后獲得的一列數(shù)據(jù)需要放在li標簽里，那么我們在循環(huán)生產(chǎn)li標簽的同時，可以依次設(shè)置data-*屬性，這樣，我們在寫JavaScript語言來操作li標簽的時候，可以直接讀取自定義的屬性來獲取li標簽對應(yīng)的數(shù)據(jù)對象。

data-*自定義屬性可以使用jQuery庫來解決兼容問題。

html5自定義屬性怎么寫

div id="newTest" myAttr="getAttr"/div

這里的“myAttr”就是這個標簽的自定義屬性了。

如果定義了屬性卻使用不了，那么這個屬性就沒有任何意義了，接下來就是如何去調(diào)用我們的自定義屬性的值了。

在IE瀏覽器里，我們通過獲取對象后直接調(diào)用就可以了

document.getElementById("newTest").myAttr;

關(guān)于HTML5如何自定義屬性

HTML5新增自定義屬性的特性,在HTML代碼中,我們可以在標簽上直接定義自定義屬性,自定義屬性命要以'data-'開頭

p?data-hello="這是自定義屬性的值"呵呵呵呵/p

我們可以使用原生JS獲取到自定義屬性的值

let?p?=?document.querySelector('p')

console.log(p.dataset.hello)?//這是自定義屬性的值

也可以通過jquery獲取自定義屬性的值

$('p').data('hello')?//這是自定義屬性的值

當然,也可以通過傳統(tǒng)的方法來獲取自定義屬性的值

let?p?=?document.querySelector('p')

p.getAttribute('data-hello');

p.setAttribute('data-hello','這是重新賦值')

//jquery

$('p').attr('data-hello')??//獲取

$('p').attr('data-hello','設(shè)置')??//設(shè)置

如何使用HTML5自定義數(shù)據(jù)屬性

html5有自定義屬性的功能，格式是data-* = "xxx"（*表示自定義的屬性名，xxx表示數(shù)據(jù)）。

分享標題：html5自定義,html5自定義報表
網(wǎng)站路徑：http://chinadenli.net/article39/dsioosh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站制作、響應(yīng)式網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)