CSSStyleDeclaration: getPropertyValue() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The CSSStyleDeclaration.getPropertyValue() method interface returns a string containing the value of a specified CSS property.
Syntax
getPropertyValue(property)
Parameters
property
-
A string representing the property name (in hyphen case) to be checked.
Return value
A string containing the value of the property. If not set, returns the empty string.
The property value is dynamically computed, not what was originally specified in the declaration. The serialization happens in the following way:
- If
property
is a shorthand property, then get all longhand properties it corresponds to. Note that shorthand properties specified in the original stylesheet were already expanded during parse time. If at least one of those longhand properties is undeclared, or their!important
statuses differ, then the result is the empty string. Otherwise, a property value that expands to the same list of longhand property values is returned, and this shorthand value will omit as many components as possible, and reordered to match the canonical order in the formal definition if possible. If either of the above syntactic translations would be less backwards-compatible, do not perform them. - Otherwise, the property is serialized according to its data type. Each data type has one canonical representation; for example,
<color>
values always usergb(R, G, B)
orrgba(R, G, B, A)
.
In essence, the property value is canonicalized, ensuring that two property values with the same rendering effect compare equal even when they are declared differently.
Examples
The following JavaScript code queries the value of the margin
property in
a CSS selector rule:
const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("margin"); // "1px 2px"
The returned string might differ from the value specified in the style specification of the element. For instance this styling:
<style>
p#blueish {
color: hsl(250 90 50);
}
</style>
<script>
const declaration = document.styleSheets[0].cssRules[0].style;
const value = declaration.getPropertyValue("color");
</script>
Will set a value rgb(51, 13, 242);
. This is important when comparing styles by string.
Specifications
Specification |
---|
CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertyvalue |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getPropertyValue |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support