diff options
Diffstat (limited to 'files/es/web/api/cssstyledeclaration')
| -rw-r--r-- | files/es/web/api/cssstyledeclaration/index.html | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/files/es/web/api/cssstyledeclaration/index.html b/files/es/web/api/cssstyledeclaration/index.html new file mode 100644 index 0000000000..f63d7a2cfd --- /dev/null +++ b/files/es/web/api/cssstyledeclaration/index.html @@ -0,0 +1,73 @@ +--- +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 (<elem style="...">);</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" title="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" title="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" title="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 >= 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> |