国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 21:35:41
字體:
來源:轉載
供稿:網友

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”  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,所以,這個代碼,就是具有兼容性的代碼了。

感謝網友的交流,他給出了 getAttribute 和 setAttribute 的方法:

復制代碼 代碼如下:

function customAttributeDemo(obj)
{
    if (obj.getAttribute('clickCount') === '0')
        obj.setAttribute('clickCount', '1');
    else
        obj.disabled = true;
}

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 满洲里市| 阳谷县| 甘泉县| 鸡西市| 兰溪市| 华蓥市| 东山县| 富源县| 额敏县| 沁水县| 海南省| 和静县| 河北区| 万年县| 武宁县| 牙克石市| 理塘县| 财经| 宝应县| 宁海县| 平定县| 赣榆县| 保靖县| 绵阳市| 铁力市| 万载县| 泰州市| 彭阳县| 利津县| 革吉县| 原平市| 旬邑县| 康平县| 平江县| 内江市| 台前县| 定州市| 江北区| 朝阳区| 色达县| 延川县|