mozilla

Element.style

Imagen:traduccion-pendiente.png Esta página está traduciéndose a partir del artículo Element.style, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción

Resumen

Devuelve un objeto que representa el atributo style del elemento.

Ejemplo

var div = document.getElementById("div1");
div.style.marginTop = ".25in";

Notas

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

elt.style.color = "blue";  // Asignación directa

var st = elt.style;
st.color = "blue";  // Asignación Indirecta

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st)
  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";

 

Especificación

DOM Level 2 Style: ElementCSSInlineStyle.style

Etiquetas y colaboradores del documento

Contributors to this page: fscholz, teoli, HenryGR, khalid32
Última actualización por: khalid32,