¿Cómo manejan los navegadores los atributos inválidos / no especificados en los elementos HTML? - javascript, jquery, html, web

Por ejemplo, si tengo esto:

<div id="blah" myattribute="something">whatever</div>

¿Puedo estar seguro de que ningún navegador ignorará (y, por lo tanto, hará que sea inaccesible desde JavaScript heredado) el myattribute? Soy consciente de que esto es feo y no estándar, pero es bastante útil. O si lo hacen, ¿jQuery todavía podría obtenerlos?

Respuestas

Los navegadores no se quejarán de atributos no reconocidos, y Javascript y jQuery aún podrán acceder a ellos:

console.log( $("#blah").attr("myattribute") ); // something
console.log( document.getElementById("blah").getAttribute("myattribute") ); // something

Sin embargo, debes usar HTML5 data-* atributo que es específicamente para el propósito de los atributos personalizados. jQuery tiene tiene el data() Método para acceder / configurarlos:

<div id="blah" data-myattribute="something">whatever</div>

<script>
console.log( $("#blah").data("myattribute") ); // something
</script>

Deberías usar data atributos, son estándares web.

Me gusta esto:

<div id="blah" data-myattribute="something">whatever</div>

Luego, en jQuery puedes hacer:

var value = $("#blah").data("myattribute");

¿Por qué no utilizar los atributos de datos? Atributos de datos, HTML5?

El navegador ignorará los atributos no válidos. Si desea especificar sus propios atributos, utilice el atributo de datos, ya que se reconoce como válido.

w3 documentos en el atributo de datos

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes