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

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

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括榕江網(wǎng)站建設(shè)、榕江網(wǎng)站制作、榕江網(wǎng)頁制作以及榕江網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，榕江網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到榕江省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

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

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

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

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

三，添加測(cè)試按鈕

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

四，獲取屬性：

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

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

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

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

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

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

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

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

html5自定義屬性怎么用data-bind=

在jQuery的attr與prop提到過在IE9之前版本中如果使用property不當(dāng)會(huì)造成內(nèi)存泄露問題，而且關(guān)于Attribute和Property的區(qū)別也讓人十分頭痛，在HTML5中添加了data-*的方式來自定義屬性，所謂data-*實(shí)際上上就是data-前綴加上自定義的屬性名，使用這樣的結(jié)構(gòu)可以進(jìn)行數(shù)據(jù)存放。使用data-*可以解決自定義屬性混亂無管理的現(xiàn)狀。

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

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

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

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

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

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

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

html5自定義屬性怎么寫

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

這里的“myAttr”就是這個(gè)標(biāo)簽的自定義屬性了。

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

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

document.getElementById("newTest").myAttr;

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

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

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

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

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

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

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

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

當(dāng)然,也可以通過傳統(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è)置

當(dāng)前標(biāo)題：html5自定義屬性,html自定義屬性有啥用
文章位置：http://www.yijiale78.com/article46/dsiojeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、虛擬主機(jī)、用戶體驗(yàn)、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化

廣告

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