JavaScript-Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)

2020-03-24 16:00:48

字體：大中小

來源：轉載

供稿：網友

JavaScript JavaScript/Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)
HTML元素，屬性已經十分豐富了。但是，在某些場合下，也會顯得捉襟見肘，這時候自定義屬性就發揮了十分關鍵的作用。Html元素的自定義屬性，使用起來，十分方便，例如： input type=”button” value=”Click Me, Baby!” / 假設我們現在需要限制，這個按鈕，只能點擊2次，然后就失效了。通常的實現方式，是可以利用全局變量的形式來記錄點擊次數，但我們這里用自定義屬性來實現這個功能，展示一下自定義屬性的優勢；我們對上面的button做一下改造： input type=”button” value=”Click Me, Baby!” clickCount=”0” / 可以看到，我為這個button 增加了一個自定義屬性 clickCount，并將初始值設為 0；下面我們來寫實現功能的js代碼：1. 給 button 增加click事件的處理 input type=”button” value=”Click Me, Baby!” clickCount=”0” 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，所以，這個代碼，就是具有兼容性的代碼了。感謝網友的交流，他給出了 getAttribute 和 setAttribute 的方法：
復制代碼代碼如下:
function customAttributeDemo(obj)
{
if (obj.getAttribute('clickCount') === '0')
obj.setAttribute('clickCount', '1');
else
obj.disabled = true;
}
更多編程語言

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

上一篇：javascript html5實現表單驗證

下一篇：javascript html5搖一搖功能的實現