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

<h2 id="Summary" name="Summary">概要</h2>

<p><code>CSSStyleDeclaration</code> 表示了一個 CSS 屬性名值對（property-value pairs）的集合。它被用於幾個 API 當中：</p>

<ul>
 <li>{{domxref("HTMLElement.style")}} - to manipulate the style of a single element (&lt;elem style="..."&gt;);</li>
 <li>(TODO: reword) is an interface to the <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> returned by the <code><a href="/en/DOM/cssRule.style" rel="internal" title="en/DOM/cssRule.style">style</a></code> property of a <code><a href="/en/DOM/cssRule" rel="internal" title="en/DOM/cssRule">cssRule</a></code> in a <a href="/en/DOM/stylesheet" rel="internal" title="en/DOM/stylesheet">stylesheet</a>, when the rule is a <a href="/en/DOM/cssRule#CSSStyleRule" title="en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a>.</li>
 <li><code>CSSStyleDeclaration</code> is also a <strong>read-only</strong> interface to the result of <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>().</li>
</ul>

<h2 id="Syntax" name="Syntax">屬性</h2>

<dl>
 <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
 <dd>Textual representation of the declaration block. Setting this attribute changes the style.</dd>
 <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
 <dd>The number of properties. See the {{domxref("CSSStyleDeclaration.item", 'item()')}} method below.</dd>
 <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
 <dd>The containing {{domxref("CSSRule")}}.</dd>
</dl>

<h2 id="Syntax" name="Syntax">方法</h2>

<dl>
 <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
 <dd>Returns the optional priority, "important".</dd>
 <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
 <dd>Returns the property value given a property name.</dd>
 <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
 <dd>Returns a property name.</dd>
 <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
 <dd>Removes a property from the CSS declaration block.</dd>
 <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
 <dd>Modifies an existing CSS property or creates a new CSS property in the declaration block/.</dd>
 <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
 <dd><span style="color: #ff0000;">Only supported via getComputedStyle in Firefox.</span> Returns the property value as a {{ domxref("CSSPrimitiveValue") }} or <code>null</code> for <a href="/en/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">shorthand properties</a>.</dd>
</dl>

<h2 id="Example" name="Example">範例</h2>

<pre class="brush: js">var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (var i = styleObj.length; i--;) {
  var nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);</pre>

<h2 id="Notes" name="Notes">備註</h2>

<p>The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).</p>

<h2 id="參見">參見</h2>

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

<h2 id="Specification" name="Specification">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
   <td>{{Spec2('CSSOM')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
   <td>{{Spec2('DOM2 Style')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>