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-radiusMozBorderRadius)

16 pensamientos en “getAttribute y setAttribute en Javascript

  1. Bitacoras.com
  2. Imagen de Juvinao el dijo:

    Emilio,mira me esta sucediendo algo muy raro..

    Entro a mi categoria de “Gadgets y Widgets” y me sale el siguiente cartel:

    http://bloggerblogwidgets.googlecode.com está solicitando un nombre de usuario y una contraseña. El sitio dice: “Google Code Subversion Repository”

    Y me pide contraseña y eso, lo mas raro es que solo me aparece en la categoria que te digo:

    http://www.miltrucosblogger.info/search/label/Gadgets%20y%20Widgets

    Y hay un hilo abierto en el foro de blogger sobre este mismo tema y segun he leido a varios les ha pasado esto, tal ves tu sepas la solucion a este problema

    • Imagen de Emilio Cobos Álvarez el dijo:

      Acabo de entrar a tu página y no me aparece el error. ¿Puedes darme más detalles, o una captura, o algo?

      De todas maneras, parece ser que way2blogging (que era el blog que poseía esa cuenta) ha tenido algún problema con el hosting en google code y ha movido los scripts a Github (cosa que yo también tenía pensado hacer para no tener problemas con el tráfico de dropbox como ha tenido Víctor), así que sería cambiar la url del script por la conveniente especificada en su página original.

  3. Imagen de PabloPablo el dijo:

    Buenas tardes Emiilo, estaba buscando información sobre el getAttribute() y setAttribute() y francamente tu explicación a sido una de las más claras. Pero aun así sigo teniendo tengo alguna duda.
    – Tengo un div con un id=”uno” y una class=”a”, quiero que al hacer click en el id=”uno” la class=”a” pase a ser class=”b”.
    – Si vuelvo ha hacer click en el id=”uno”, ahora con la class=”b”, volverá a cambiar la anterior class=”a”.

    Lo que tengo por el momento es:

    
    
      #uno { height: 200px; width: 200px; }
      .a { background: #F00; }
      .b { background: #090; }
    
    
    JavaScript

    // definimos las variables claseA y claseB
    var claseA = document.getElementById(“uno”).getAttribute(“a”);
    var claseB = document.getElementById(“uno”).getAttribute(“b”);

    function changeClass(){
    // Si el valor de la variable claseA es igual a “a”, entra.
    switch ( claseA == “a” || claseB == “b”) {
    // hacemos un setup de “claseB” a “claseA”
    case claseA:
    var claseA = document.getElementById(“uno”).setAttribute(“b”);
    break;
    // tenemos por defecto la opción de “claseA” a “claseB”
    default:
    var claseB = document.getElementById(“uno”).setAttribute(“a”);
    break;
    }
    }

    
    
       
    
    

    Muchas gracias de antemano

    • Imagen de PabloPablo el dijo:

      Que desastre de comentario, disculpa. Re escribo de nuevo el código:

      
        #uno { height: 200px; width: 200px; }
        .a { background: #F00; }
        .b { background: #090; }
      
      
      // definimos las variables claseA y claseB
        var claseA = document.getElementById("uno").getAttribute("a");
        var claseB = document.getElementById("uno").getAttribute("b");
      
      	function changeClass(){
                      // Si el valor de la variable claseA es igual a "a", entra.
      		switch ( claseA == "a" || claseB == "b") {
                              // hacemos un setup de "claseB" a "claseA"
                              case claseA:
      			var claseA = document.getElementById("uno").setAttribute("b");
                              break;
                              // tenemos por defecto la opción de "claseA" a "claseB"
                              default: 
      			var claseB = document.getElementById("uno").setAttribute("a");
                              break;
      		}
      	}
      
      
        
      
  4. Imagen de deivisdeivis el dijo:

    Hola estuve haciendo este ejercicio pero me sale un error en la consola del navegador que es este Uncaught TypeError: Cannot read property ‘getAttribute’ of nulljavascript.html:18 (anonymous function), porque sera no entiendo agradecería su ayuda :(

  5. Imagen de Fabio MedinaFabio Medina el dijo:

    Buenas Emilio el post estuvo sensacional pero tengo una duda yo quisiera obtener un atributo en específico de un div que tiene cierta clase pero no logró obtenerlo cuando utilizo el classbyname junto con el getattribute no me funciona en cambio cuando utilizo elementbyid con el getattribute me funciona de maravilla no quiero utilizar id debido a que no es un solo elemento son varios y el css varía dependiendo del atributo podrías ayudarme con esto porfavor

    • Imagen de Fabio MedinaFabio Medina el dijo:

      Así tengo mi código no se que estaré haciendo mal pero la linea 1 y 2 de javascript me funcionan bien el problema viene desde la 3 hasta la 4 no se que pasa si pudieras ayudarme seria genial

      
      Titulo
      
      
      var x = document.getElementsByClassName("intro");
      x[0].style.backgroundColor = "aqua";
      t = x.getAttribute("data-titulo");
      alert(t);
      

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.