¿Cómo agregar / actualizar un atributo a un elemento HTML usando JavaScript?

128

Estoy tratando de encontrar una manera de agregar / actualizar atributos usando JavaScript. Sé que puedo hacerlo con la setAttribute()función, pero eso no funciona en IE.

javascript html cross-browser desarrollador
fuente

Respuestas:

163

Puede leer aquí sobre el comportamiento de los atributos en muchos navegadores diferentes, incluido IE.

element.setAttribute()debería hacer el truco, incluso en IE. ¿Lo intentaste? Si no funciona, entonces tal vez element.attributeName = 'value'podría funcionar.

y yo
fuente
55
esto funciona. crea un atributo si no existe y lo actualiza si existe. ¿Está esto documentado en algún lugar en cuanto a cómo funciona?
dev.e.loper
@ dev.e.loper DOM spec es un buen lugar para comenzar: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
valentinas
1
Cuando hago lo siguiente: document.getElementById("nav").setAttribute("class", "active");funciona en la consola Chrome JS, pero en la página real no funciona ... ¿alguna idea? Por cierto, en la página real incluyo el .jsarchivo antes del final del bodyalcance.
knownasilya
36

Lo que parece fácil es realmente complicado si quieres ser completamente compatible.

var e = document.createElement('div');

Digamos que tiene una identificación de 'div1' para agregar. 

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Todo esto funcionará, excepto el último en IE 5.5 (que es la historia antigua en este punto, pero aún es el valor predeterminado de XP sin actualizaciones).

Pero hay contingencias, por supuesto. No funcionará en IE antes de 8: e.attributes['style'] no va a error, pero en realidad no se define la clase, tiene que ser Nombre de clase: e['class'].
Sin embargo, si está utilizando atributos, esto FUNCIONARÁ:e.attributes['class']

En resumen, piense en los atributos como literales y orientados a objetos.

En literal, solo quieres que escupe x = 'y' y no pienses en ello. Para eso están los atributos, setAttribute, createAttribute (excepto la excepción de estilo de IE). Pero debido a que estos son realmente objetos, las cosas pueden confundirse.

Dado que se tomará la molestia de crear correctamente un elemento DOM en lugar de jQuery innerHTML slop, lo trataría como uno y me quedaría con e.className = 'fooClass' y e.id = 'fooID'. Esta es una preferencia de diseño, pero en este caso tratar de tratar es como cualquier cosa que no sea un objeto que funcione en su contra.

Nunca será contraproducente para ti como lo harían los otros métodos, solo ten en cuenta que class es className y style es un objeto, por lo que es style.width not style = "width: 50px". También recuerde tagName, pero esto ya está configurado por createElement, por lo que no debería preocuparse por eso.

Esto fue más largo de lo que quería, pero la manipulación de CSS en JS es un asunto complicado.

JPearce
fuente
55
Windows XP salió con IE6, no 5.5. Eso sería terrible
mgol
Esto funciona con id, no con algo más comodata-toggle
demorar un
30

Solución jQuery obligatoria . Encuentra y establece el titleatributo en foo. Tenga en cuenta que esto selecciona un solo elemento ya que lo estoy haciendo por id, pero puede configurar fácilmente el mismo atributo en una colección cambiando el selector.

$('#element').attr( 'title', 'foo' );
tvanfosson
fuente
3
+1 para la solución jQuery. En mi caso, estaba tratando de evitar jQuery y producirlo en javascript puro debido a los requisitos de mi trabajo. Me alegra que existan ambas respuestas. Gracias.
NuclearPeon
7

¿Qué quieres hacer con el atributo? ¿Es un atributo html o algo propio?

La mayoría de las veces simplemente puede abordarlo como una propiedad: ¿desea establecer un título en un elemento? element.title = "foo"lo haré.

Para sus propios atributos JS personalizados, el DOM es naturalmente extensible (también conocido como expando = true), cuyo resultado simple es que puede hacerlo element.myCustomFlag = fooy luego leerlo sin problemas.

annakata
fuente