En la anterior entrada sobre Javascript (getAttribute y setAttribute) dije que iba a dejar cómo editar el atributo style con Javascript para otra entrada porque era más complicado de lo normal.

El caso es que en Javascript, para editar ese atributo tenemos que editar el objeto style del elemento. Y cómo se hace?. A priori no es muy difícil:

var elemento = document.getElementById('ejemplo'); // Seleccionar el elemento
elemento.style.color = "red"; // Hacer que su color sea rojo.

Los guiones

Pero, ¿y si queremos editar la propiedad background-image? (o cualquier otra con guiones). Probemos:

elemento.style.background-image = "url(foo.png)";

Como os habréis imaginado, esto no funcionará. ¿Debemos probar entonces con la notación alternativa del objeto?

elemento.style['background-image'] = "url(foo.png)";

Tampoco funcionará. Entonces, ¿cómo accedemos a las propiedades que tienen guion?.

Pues resulta que para acceder a esas propiedades hay que hacerlo de otra manera, usando una forma de escribir que los angloparlantes llaman camelCase.

El método, para entenderlo, es fácil: Se eliminan todos los guiones, y la letra siguiente va en mayúscula

Así, esto sí funcionará:

elemento.style.backgroundImage = "url(foo.png)";

Pero, ¿y los prefijos?

La forma para editar las propiedades con prefijos es idéntica: Reemplazar guiones y poner la siguiente en mayúscula. Así, -moz-box-shadow se convertirá en MozBoxShadow

La excepción: Microsoft

Con esto de los prefijos a los de Microsoft se les pasó poner la primera mayúscula, así que, por ejemplo: -ms-transform se convierte en msTransform (y no en MsTransform como debería).

La otra excepción: los floats

Hay una última excepción con este objeto: la propiedad float. La palabra float es una palabra reservada en la mayoría de lenguajes de programación. Representa un número con decimales. Por lo tanto, no podemos hacer:

elemento.style.float = "right"

Los navegadores que respetan los estándares han usado el nombre cssFloat, mientras que las versiones antiguas de Internet Explorer usan styleFloat.
Así, para hacer que nuestro elemento flote a la izquierda:

elemento.style.cssFloat = elemento.style.styleFloat = "left";

6 pensamientos en “Editando elementos con Javascript: El objeto style

  1. Bitacoras.com
  2. Imagen de Andres Ardila el dijo:

    Muy buen articulo, hay te complemento algo xD cuando guardamos una variable que tenga números como para definir el ancho de un objeto lo hacemos de esta manera

    var alto = element.offsetHeight;
    element.style.height = alto + 'px' ;
    

    ya que si solo escribimos la variable alto no lo toma, bueno quizá eso no sea muy importante, pero no se porque se me paso a mi xD

    • Imagen de Emilio Cobos Álvarez el dijo:

      Es un punto a tener en cuenta, tal vez lo obvié ;) gracias.

      Cuando escribes CSS no escribes height: 45;, sino height: 45px;.

      Estás dando valores como si lo hicieras con CSS, así que debes especificar las unidades (salvo para el 0).

      Gracias otra vez, Andrés :)

  3. Imagen de Asier el dijo:

    Hola!
    Felicidades Emilio, tanto este como el anterior, muy buenos post!

    Se me da un caso algo más complicado, ¿cómo haríamos si en vez de querer editar un atributo del elemento “ID”, quisiéramos hacerlo de un elemento hijo de este que lleva “class”?

    Pongo un ejemplo:

    
    <div id="cont1"><div class="cont2" style="display: none">...</div></div>
    

    Si queremos cambiar el display a “block” por ejemplo.
    *Lo más cómodo sería ponerle un ID a cont2… pero estoy investigando cómo hacerlo pero me quedo pillado aquí:

    
    var header = document.getElementById ("cont1");    if (header.getElementsByClassName) {        var cont1 = header.getElementsByClassName ("cont2");        if (cont1[0].style.display == "none") { alert ("hasta aquí he llegado!");    }
    

    A ver qué me decís!
    Gracias.

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.