CSSStyleDeclaration
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
stylede unaregla CSSen una hoja de estilos, cuando la regla es una CSSStyleRule. CSSStyleDeclarationes 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
ROCSSPrimitiveValueen 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ónDOMExceptionNOT_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);
Notas
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).