establecer/obtener dinámicamente atributo personalizado

Question

Los principales navegadores modernos admiten la configuración/recuperación de atributos personalizados dinámicamente, excepto IE-family. ¿Cómo puedo configurar/obtener mi atributo personalizado en todos los navegadores?

Esto es lo que he probado hasta ahora:

HTML:

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

JS:

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

o

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

En ambos casos, es decir, los rendimientos alert()null.

Answer 1

He probado el código en Internet Explorer 7/8

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

y funciona muy bien. ¿Ese simple caso de prueba falla para usted, o realmente está haciendo algo diferente?

Puede utilizar el soporte notación

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

Si no tiene la - en el nombre, puede utilizar la notación de punto

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

Answer 2

Su código funciona bien en IE6, IE7, IE8 , FF, Chrome, Opera.