最近のブラウザは一般に、不明な属性を要素に割り当てられたプロパティとして扱い、デフォルトの影響はありませんが、CSS および JavaScript では属性として認識されます。たとえば、あなたの場合、CSS セレクターは属性を持つ要素にinput[idColor]
一致しますが、そのような属性は HTML 仕様で定義されていません。input
idColor
ただし、JavaScript では通常、これらをプロパティとして直接利用することはできないため、ブラウザーの違いはありますが、たとえばdocument.getElementById('txt1').percent
yieldになります。undefined
しかし、document.getElementById('txt1').getAttribute('percent')
降伏し50
ます。
Android でのみテストしましたが、これはモバイル ブラウザにも当てはまると思います。
ただし、HTML で独自の属性名を作成するのは安全ではありません。将来の HTML 仕様、または単に一部のブラウザが、 という属性に意味を割り当てたらどうなるpercent
でしょうか? その意味は、私たちが今できるすべてのことに対して、非常に驚くべきものになる可能性があります.
したがって、クライアント側のスクリプトで使用する任意のデータを持つ属性を使用する場合は、 で始まる名前をdata-
使用することをお勧めします。これにより、独自の名前空間で遊ぶことができます。合理的なブラウザや検索エンジンは、そのような属性をページ作成者の私的な遊び場以外のものとして扱い、めちゃくちゃにしないようにすることはありません。したがって、例を使用する方が良いでしょうdata-percent="50" data-color="12"
。