index.html

---
title: CSSStyleDeclaration
slug: Web/API/CSSStyleDeclaration
tags:
  - API
  - CSSOM
  - CSSRule
  - Interface
  - Reference
browser-compat: api.CSSStyleDeclaration
---
<div>{{APIRef("CSSOM")}}</div>

<p>The <strong><code>CSSStyleDeclaration</code></strong> interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.</p>

<p>A <code>CSSStyleDeclaration</code> object can be exposed using three different APIs:</p>

<ul>
 <li>Via {{DOMxRef("HTMLElement.style")}}, which deals with the inline styles of a single element (e.g., <code>&lt;div style="..."&gt;</code>).</li>
 <li>Via the {{DOMxRef("CSSStyleSheet")}} API. For example, <code>document.styleSheets[0].cssRules[0].style</code> returns a <code>CSSStyleDeclaration</code> object on the first CSS rule in the document's first stylesheet.</li>
 <li>Via {{DOMxRef("Window.getComputedStyle()")}}, which exposes the <code>CSSStyleDeclaration</code> object as a <strong>read-only</strong> interface.</li>
</ul>

<h2 id="Attributes">Attributes</h2>

<dl>
 <dt>{{DOMxRef("CSSStyleDeclaration.cssText")}}</dt>
 <dd>Textual representation of the declaration block, if and only if it is exposed via {{DOMxRef("HTMLElement.style")}}. Setting this attribute changes the inline style. If you want a text representation of a computed declaration block, you can get it with <code>JSON.stringify()</code>.</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>

<h3 id="CSS_Properties">CSS Properties</h3>

<dl>
 <dt>{{DOMxRef("CSSStyleDeclaration.cssFloat", "CSSStyleDeclaration.cssFloat")}}</dt>
 <dd>Special alias for the {{CSSxRef("float")}} CSS property.</dd>
 <dt>{{DOMxRef("CSSStyleDeclaration.named_properties", '<code>CSSStyleDeclaration</code> named properties', "", 1)}}</dt>
 <dd>Dashed and camel-cased attributes for all supported CSS properties.</dd>
</dl>

<h2 id="Methods">Methods</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 CSS property name by its index, or the empty string if the index is out-of-bounds.</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()")}} {{deprecated_inline}}</dt>
 <dd><strong>Only supported via getComputedStyle in Firefox.</strong> Returns the property value as a {{DOMxRef("CSSPrimitiveValue")}} or <code>null</code> for <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand properties</a>.</dd>
</dl>

<h2 id="Example">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="Specifications">Specifications</h2>

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

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