JavaScript/Js腳本處理html元素的自訂屬性解析(親測相容Firefox與IE)_javascript技巧

HTML元素，屬性已經十分豐富了。但是，在某些場合下，也會顯得捉襟見肘，這時候自訂屬性就發揮了十分關鍵的作用。

Html元素的自訂屬性，使用起來，十分方便，例如：

假設我們現在需要限制，這個按鈕，只能點擊2次，然後就失效了。

通常的實作方式，是可以利用全域變數的形式來記錄點擊次數，但我們這裡用自訂屬性來實現這個功能，展示一下自訂屬性的優勢；我們對上面的button做改造：

可以看到，我為這個button 增加了一個自訂屬性 clickCount， 並將初始值設為 0；下面我們來寫實作功能的js程式碼：

1. 給 button 增加click事件的處理

2. 我們來寫 customAttributeDemo(obj) 這個函數

對於IE來講，使用自訂屬性非常簡單，因為IE自動將自訂屬性解析到了DOM中，和標準屬性沒有任何區別，IE下的版本：

複製程式碼 程式碼如下:

function customAttributeDemo(obj)
{
 lick )
    {
        obj.clickCount = '1';
    }
   🎜>    }
}


上面的程式碼在FireFox 下將失效，因為FireFox對自訂屬性的使用，限制更高，只能使用attributes[] 集合來訪問，FireFox 下的程式碼：

複製程式碼 程式碼如下:function customAttributeDemo(obj)

{

o. ].nodeValue === '0')
    {
        obj.attributes['clickCount'].nodeValue = '1';    }
}


上面的程式碼，也適用於IE，所以，這個程式碼，就是具有相容性的程式碼了。

感謝網友的交流，他給了getAttribute 和setAttribute 的方法：

複製程式碼

代碼如下

function customAttributeDemo(obj){    if (obj.getAttribute('clickCount') === '0')Attriute, Count. ;    else

        obj.disabled = true;

}