2009-01-09 8 views
40

¿Puedo agregar los atributos que quiero a las etiquetas HTML para que pueda recuperar su valor más tarde utilizando javascript? Por ejemplo:¿Puedo simplemente crear atributos en mis etiquetas HTML?

<a href="something.html" hastooltip="yes" tipcolour="yellow">...</a> 

Si eso no va a funcionar, ¿cómo almacenaría información arbitraria como esta?

Editar: Dado que parece que que componen atributos HTML no es técnicamente válida, he reformularse la segunda parte de esta pregunta en su propia pregunta aquí: How to store arbitrary data for some HTML tags

+1

+1 Soy un gran admirador de usar atributos de datos para el comportamiento de cableado declarativo, es decir, el uso de clases. Sin embargo, algo así como tipcolour trataría de usar una clase si pudiera obtener el CSS correcto. En otras palabras, atributos de comportamiento, clases de estilo. – AaronLS

Respuesta

43

En HTML5, sí. Solo tiene que ponerle un prefijo con data-. Ver the spec.

Por supuesto, esto implica que debe utilizar el tipo de documento HTML 5 (<!doctype html>), a pesar de que los navegadores no les importa.

+1

HTML5 todavía está en borrador, esta no es una recomendación segura – annakata

+6

Umm, esta especificación está destinada a ser utilizada antes de ser definitiva. http://wiki.whatwg.org/wiki/FAQ#When_will_we_be_able_to_start_using_these_new_features.3F – nes1983

+17

Esto no romperá nada más que la elección arbitaria de los atributos, y es válido para una futura especificación, ¡sonríe todo! –

4

Puede. La página no pasará la verificación, sin embargo la mayoría de los navegadores lo aceptarán.

Es casi seguro que es la forma incorrecta de hacerlo. Intente utilizar class = "hasTooltip_yes tipcolour_yellow"

+0

¿No crees que bastardear el atributo de clase es aún más erróneo? – nickf

+1

Si bastardea el atributo de clase, aún así lo validará, por lo que en términos de cumplir con los estándares, estará en mejor situación. –

+17

El hecho de que cumpla con los estándares no significa que tenga la mejor solución posible. – Kibbee

2

Dependiendo de la información que desea almacenar, debe ver algunos de los otros atributos disponibles. Estos no parecen buenos candidatos, pero 'rel' se ha usado para muchas cosas interesantes.

+0

según la especificación, el atributo rel solo puede contener LinkTypes, por ejemplo: start next prev chapter – nickf

+1

Pero, la especificación no define una lista autoritativa de tipos de enlaces, y de hecho deja espacio para la expansión – Gareth

24

Bueno, siempre puedes crear tu propia DTD para obtener nuevos atributos válidos para tus etiquetas. El navegador no tendrá problemas, debe probar su JavaScript si puede acceder a estos atributos personalizados. O puede usar las instalaciones existentes provistas por HTML y CSS. Puede utilizar varias clases como

<a href="..." class="class-one class-two has-tooltip"> 

Para la selección de color Yo estoy totalmente a utilizar los nombres de colores codificados de forma rígida en el código HTML, CSS que tiene para la declaración de estilos. Utilice el atributo de clase como un gancho para la declaración CSS y elegir nombres de las clases semánticas, por ejemplo

HTML:

<a href="..." class="has-tooltip common-tooltip"> 
<a href="..." class="has-tooltip long-tooltip"> 

CSS:

a.has-tooltip { 
    colour: red; 
} 
a.common-tooltip { 
    background: #ddd; 
} 
a.long-tooltip { 
    background: #ebf; 
} 

Y en el código JavaScript que puede generar elementos con clases como "información de herramienta larga" y "información de herramienta común" en lugar de "información de herramienta amarilla", por lo que no se contradirá a sí mismo en caso de rediseñar la página para tener información sobre herramientas verde.

+2

el ejemplo que di realmente era solo un ejemplo: los datos que almacenaría podrían ser cualquier cosa, no solo colores y otras cosas. – nickf

+0

bien, solo estaba respondiendo a la defensiva :-) – bandi

Cuestiones relacionadas