1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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>
|
