動的にカスタム属性を設定/取得する

Question

最新の主なブラウザは、IEファミリを除いて動的にカスタム属性の設定/取得をサポートしています。どのようにしてすべてのブラウザでカスタム属性を設定/取得できますか？

これは私がこれまで試したものです：

HTML：

<input id="myInput" type="text" /> 

JS：どちらの場合も

var myInput = document.getElementById('myInput'); 
myInput.setAttribute('custom-attr', 'custom-value'); 
alert(myInput.getAttribute('custom-attr')); 

または

var myInput = document.getElementById('myInput'); 
var customAttr = document.createAttribute('custom-attr'); 
customAttr.value = 'custom-value'; 
myInput.setAttributeNode(customAttr); 
alert(myInput.getAttribute('custom-attr')); 

はalert()戻り、すなわちnull。

Answer 1

私はIE7/8

var myInput = document.getElementById('myInput'); 
myInput.setAttribute('custom-attr', 'custom-value'); 
alert(myInput.getAttribute('custom-attr')); 

にあなたのコードをテストし、それが正常に動作します。単純なテストケースが失敗するのですか、実際には何か違うことをしていますか？

あなたが名前に-を持っていなかった場合は、ドット表記

var myInput = document.getElementById('myInput'); 
myInput.customAttr = 'custom-value'; 
alert(myInput.customAttr); 

Answer 2

を使用することができますあなたのコードは、IE6、IE7、IE8の上だけで正常に動作ブラケット記法

var myInput = document.getElementById('myInput'); 
myInput['custom-attr'] = 'custom-value'; 
alert(myInput['custom-attr']); 

を使用することができます、FF、クロム、オペラ。