HTML元素,屬性已經十分豐富了。但是,在某些場合下,也會顯得捉襟見肘,這時候自訂屬性就發揮了十分關鍵的作用。
Html元素的自訂屬性,使用起來,十分方便,例如:
假設我們現在需要限制,這個按鈕,只能點擊2次,然後就失效了。
通常的實現方式,是可以利用全域變數的形式來記錄點擊次數,但我們這裡用自訂屬性來實現這個功能,展示一下自訂屬性的優勢;我們對上面的button做一下改造:
<input value="Click me, baby!" type="button" clickCount=”0” />
可以看到,我為這個button 增加了一個自訂屬性 clickCount, 並將初始值設為 0;下面我們來寫實現功能的js代碼:
1. 給 button 增加click事件的處理
<input value="Click me, baby!" type="button" clickCount=”0” onclick=”customAttributeDemo(this);" />
2. 我們來寫 customAttributeDemo(obj) 這個函數
對於IE來講,使用自訂屬性非常簡單,因為IE自動將自訂屬性解析到了DOM中,和標準屬性沒有任何區別,IE下的版本:
function customAttributeDemo(obj){ if (obj.clickCount === '0') { obj.clickCount = '1'; } else { obj.disabled = true; }}
上面的代碼在 FireFox 下將失效,因為FireFox對自訂屬性的使用,限制更高,只能使用 attributes[] 集合來訪問,FireFox 下的代碼:
function customAttributeDemo(obj){ if (obj.attributes['clickCount'].nodeValue === '0') { obj.attributes['clickCount'].nodeValue = '1'; } else { obj.disabled = true; }}
上面的代碼,也適用於IE,所以,這個代碼,就是具有相容性的代碼了,嘿嘿