En las entradas anteriores hemos aprendido lo más básico, a seleccionar elementos, hacer comprobaciones, algunas cosas que no deberías hacer, y a hacer un loop for. Ahora vamos a ver cómo editar los elementos que hemos seleccionado: Cambiar sus atributos.

Partimos del siguiente código:

<div id="ejemplo" data-atributo-sin-valor class="miejemplo" style="
	width: 100px;
	position: relative;
	background: #2a7fce;
	color: #111;
	text-align: center;
	line-height: 100px;">Soy el ejemplo!</div>

Para editar y obtener sus atributos nos serviremos de getAttribute y setAttribute. Como su nombre indica, sirven para obtener el valor de un atributo (getAttribute) y configurarlo (setAttribute).

getAttribute

A la función getAttribute le pasaremos el nombre del atributo, y nos puede devolver:

• null si el atributo no está definido.
• El valor del atributo (si el atributo está definido en el elemento, pero no tiene valor, se devolverá una string vacía (""))

Aquí tenéis un ejemplo básico, que podéis ver en la consola:

var elemento = document.querySelector('#ejemplo');

elemento.getAttribute('id'); // "ejemplo"
elemento.getAttribute('data-atributo-que-no-existe'); // null
elemento.getAttribute('data-atributo-sin-valor'); // ""

setAttribute

A la función setAtrribute, le pasaremos el nombre del atributo y el valor que queremos darle:

var elemento = document.querySelector('#ejemplo');

elemento.setAttribute("data-atributo-que-no-existe", "Valor para ese atributo");

// Comprobación
elemento.getAttribute("data-atributo-que-no-existe"); // "Valor para ese atributo"

Atributos con una propiedad para sí mismos

Ojo, aunque getAttribute y setAttribute funcionarán, los elementos tienen ciertas propiedades específicas para acceder a algunos atributos. Aparte de style (ver abajo), aquí tenéis algunos de las propiedades más frecuentes:

var elemento = document.querySelector('#ejemplo');
// class
elemento.className // "miejemplo"
elemento.className = "miejemplo ejemplo-especial"; // Ahora el elemento tendrá las clases "miejemplo" y "ejemplo-especial"

// id
elemento.id // "ejemplo"

Esas son globales, y son siempre strings, aunque no estén definidos. Pero en elementos más específicos se pueden encontrar otros.

En elementos más específicos (como <a>, <img> e <input>) tenemos propiedades adicionales (no están todas pero sí las más importantes):

• En <a> tenemos href, target y title
• En <img> tenemos src y alt
• En <input> están value y type…

El atributo style

Éste atributo es la madre del cordero, así que lo dejaré para otra entrada. Pero como introducción:

• Se accede a él de forma específica (elemento.style), pero no devuelve una string, sino un ElementCSSInlineStyle (para el caso, un objeto).
• Ese objeto tiene tantas propiedades como propiedades css acepta el navegador
• Los nombres de esas propiedades son el de la propiedad (excepto float que es una palabra reservada), o están en camelCase si tienen guiones elemento.style.borderRadius. Para hacer la conversión CSS/Javascript reemplazad todos los guiones y la letra siguiente por sólo la letra en mayúscula (ej: -moz-border-radius › MozBorderRadius)