---
title: CSSStyleDeclaration
slug: Web/API/CSSStyleDeclaration
tags:
  - Interfaz
  - Referencia
translation_of: Web/API/CSSStyleDeclaration
---
<p>{{ APIRef("CSSOM") }}</p>

<h2 id="Summary" name="Summary">Resúmen</h2>

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

<ul>
 <li>{{domxref("HTMLElement.style")}} - para manipular el estilo de un solo elemento (&lt;elem style="..."&gt;);</li>
 <li>En otras palabras, es un interface para los <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">bloques de declaraciones</a> devueltos por la propiedad <code><a href="/en/DOM/cssRule.style" rel="internal" title="en/DOM/cssRule.style">style</a></code> de una <code><a href="/en/DOM/cssRule" rel="internal" title="en/DOM/cssRule">regla CSS</a></code> en una <a href="/en/DOM/stylesheet" rel="internal" title="en/DOM/stylesheet">hoja de estilos</a>, cuando la regla es una <a href="/en/DOM/cssRule#CSSStyleRule" title="en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a>.</li>
 <li><code>CSSStyleDeclaration</code> es también un interface de <strong>sólo-lectura</strong> para el resultado de <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>().</li>
</ul>

<h2 id="Syntax" name="Syntax">Atributos</h2>

<dl>
 <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
 <dd>Representación textual del bloque de declaración. Estableciendo este atributo cambia el estilo.</dd>
 <dt>{{domxref("CSSStyleDeclaration.length")}}</dt>
 <dd>El número de propiedades. Ver el método del <strong>elemento</strong> inferior.</dd>
 <dt>{{domxref("CSSStyleDeclaration.parentRule")}}</dt>
 <dd>El contenedor {{domxref("CssRule")}}.</dd>
</dl>

<h2 id="Syntax" name="Syntax">Métodos</h2>

<dl>
 <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
 <dd>Retorna la prioridad opcional, "important". Ejemplo: <em>priString</em>= <em>styleObj</em>.getPropertyPriority('color')</dd>
 <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
 <dd>Retorna el valor de la propiedad. Ejemplo: <em>valString</em>= <em>styleObj</em>.getPropertyValue('color')</dd>
 <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
 <dd>Retorna un nombre de propiedad. Ejemplo: <em>nameString</em>= <em>styleObj</em>.item(0) Alternative: <em>nameString</em>= <em>styleObj</em>[0]</dd>
 <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
 <dd>Retorna el valor borrado. Ejemplo: <em>valString</em>= <em>styleObj</em>.removeProperty('color')</dd>
 <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
 <dd>Sin retorno. Ejemplo: <em>styleObj</em>.setProperty('color', 'red', 'important')</dd>
 <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}}</dt>
 <dd><span style="color: rgb(255, 0, 0);">Solo soportado a través de getComputedStyle.</span> Devuelve un {{ domxref("ROCSSPrimitiveValue") }} en Firefox ({{ domxref("CSSPrimitiveValue") }}, en otros, los cuales implementan <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue">CSSValue</a>), o nulo para <a href="/en/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">Propiedades taquigráficas</a>. Ejemplo: <em>cssString</em>= window.getComputedStyle(<em>elemento</em>, <code>null</code>).getPropertyCSSValue('color').cssText;<br>
 Observación: Gecko 1.9 devuelve <strong>null </strong>a menos que se utilice <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">getComputedStyle()</a>.<br>
 Observación: Este método puede estar <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html">desaconsejado por el W3C</a> , y no está presente en el último <a href="http://dev.w3.org/csswg/cssom/#cssstyledeclaration">borrador CSSOM</a>. No está soportado por IE e incluso aunque la función existe en Opera, llamarla lanza una excepción {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.</dd>
</dl>

<h2 id="Example" name="Example">Ejemplo</h2>

<pre class="brush: js">var styleObj= document.styleSheets[0].cssRules[0].style;
alert(styleObj.cssText);
for (var i = styleObj.length-1; i &gt;= 0; i--) {
   var nameString = styleObj[i];
   styleObj.removeProperty(nameString);
}
alert(styleObj.cssText);</pre>

<h2 id="Notes" name="Notes">Notas</h2>

<p>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).</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">Propiedades DOM CSS</a></li>
</ul>

<h2 id="Specification" name="Specification">Especificación</h2>

<p><a class="external" href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSOM: CSSStyleDeclaration</a></p>