JavaScript/Js スクリプトは HTML 要素のカスタム属性解析を処理します (Firefox および IE と互換性のある個人テスト)_JavaScript スキル

HTML 要素には非常に豊富な属性があります。ただし、現時点では、カスタム属性が非常に重要な役割を果たしている場合があります。

Html 要素のカスタム属性は非常に便利に使用できます。次に例を示します。

このボタンは 2 回までしかクリックできないように制限する必要があるとします。その後は無効になります。

通常の実装方法は、グローバル変数を使用してクリック数を記録することですが、ここではカスタム属性を使用してこの機能を実装し、上のボタンを変更してみましょう:

ご覧のとおり、このボタンにカスタム属性 clickCount を追加し、初期値を 0 に設定して、関数を実装するための JS コードを作成しましょう。

1. ボタン にクリックイベント処理を追加します。

2. 関数customAttributeDemo(obj) を作成しましょう IE では、カスタム属性を DOM に自動的に解析するため、カスタム属性の使用は非常に簡単です。これは、IE のバージョンと何ら変わりません:

コードをコピー コードは次のとおりです:function CustomAttributeDemo(obj)

{

if (obj.clickCount === '0' )
{
obj.clickCount = '1';
}
else
{
obj.disabled = true;
}
}


FireFox ではカスタム属性の使用に厳しい制限があり、attributes[] コレクションを使用してのみアクセスできるため、上記のコードは FireFox では無効になります。 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;
}