CSSStyleDeclaration

Baseline

Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

Ver la compatibilidad completa
Más información

Resúmen

CSSStyleDeclaration representa una colección CSS de pares propiedad-valor. Se utiliza en unas cuantas APIs:

HTMLElement.style - para manipular el estilo de un solo elemento (<elem style="...">);
En otras palabras, es un interface para los bloques de declaraciones devueltos por la propiedad style de una regla CSS en una hoja de estilos, cuando la regla es una CSSStyleRule.
CSSStyleDeclaration es también un interface de sólo-lectura para el resultado de window.getComputedStyle().

Atributos

CSSStyleDeclaration.cssText: Representación textual del bloque de declaración. Estableciendo este atributo cambia el estilo.
CSSStyleDeclaration.length: El número de propiedades. Ver el método del elemento inferior.
CSSStyleDeclaration.parentRule: El contenedor CssRule.

Métodos

CSSStyleDeclaration.getPropertyPriority(): Retorna la prioridad opcional, "important". Ejemplo: priString= styleObj.getPropertyPriority('color')
CSSStyleDeclaration.getPropertyValue(): Retorna el valor de la propiedad. Ejemplo: valString= styleObj.getPropertyValue('color')
CSSStyleDeclaration.item(): Retorna un nombre de propiedad. Ejemplo: nameString= styleObj.item(0) Alternative: nameString= styleObj[0]
CSSStyleDeclaration.removeProperty(): Retorna el valor borrado. Ejemplo: valString= styleObj.removeProperty('color')
CSSStyleDeclaration.setProperty(): Sin retorno. Ejemplo: styleObj.setProperty('color', 'red', 'important')
CSSStyleDeclaration.getPropertyCSSValue(): Solo soportado a través de getComputedStyle. Devuelve un ROCSSPrimitiveValue en Firefox (CSSPrimitiveValue, en otros, los cuales implementan CSSValue), o nulo para Propiedades taquigráficas. Ejemplo: cssString= window.getComputedStyle(elemento, null).getPropertyCSSValue('color').cssText; Observación: Gecko 1.9 devuelve null a menos que se utilice getComputedStyle(). Observación: Este método puede estar desaconsejado por el W3C , y no está presente en el último borrador CSSOM. No está soportado por IE e incluso aunque la función existe en Opera, llamarla lanza una excepción DOMException NOT_SUPPORTED_ERR.

Ejemplo

var styleObj = document.styleSheets[0].cssRules[0].style;
alert(styleObj.cssText);
for (var i = styleObj.length - 1; i >= 0; i--) {
  var nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}
alert(styleObj.cssText);

El bloque de declaración es esa parte de la regla de estilo que aparece dentro de las llaves ({}) y que actualmente proporciona las definiciones de estilo (para el selector, la parte que precede a las llaves).