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";