YouTip

## CSSStyleDeclaration.getPropertyPriority() Method The `getPropertyPriority()` method of the `CSSStyleDeclaration` interface returns whether a specified CSS property has the `"important"` priority (i.e., if it has the `!important` qualifier set in its style declaration). --- ## Syntax ```javascript var priority = declaration.getPropertyPriority(propertyName); ``` ### Parameters | Parameter | Type | Description | | :--- | :--- | :--- | | `propertyName` | *String* | **Required.** A string representing the CSS property name (e.g., `"color"`, `"margin-top"`) to check. | ### Return Value * **`"important"`**: If the property has the `!important` priority set. * **`""` (Empty String)**: If the property does not have the `!important` priority set, or if the property does not exist in the declaration block. --- ## Browser Support The `getPropertyPriority()` method is widely supported across all modern web browsers: | Method | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`getPropertyPriority()`** | Yes | 9.0+ | Yes | Yes | Yes | --- ## Code Examples ### Example 1: Checking Inline Styles This example demonstrates how to check the priority of a CSS property defined directly on an HTML element's inline style. ```html ``` ### Example 2: Accessing Styles from a Stylesheet This example shows how to retrieve the priority of a property defined within an external or internal stylesheet rule. ```javascript // Access the first rule of the first stylesheet on the page var stylesheetRule = document.styleSheets.cssRules.style; // Check if the "color" property in this rule is marked as !important var priority = stylesheetRule.getPropertyPriority("color"); if (priority === "important") { alert("The color property has !important priority!"); } else { alert("The color property has normal priority."); } ``` --- ## Technical Details | Specification | DOM Version | | :--- | :--- | | **CSS Object Model (CSSOM)** | DOM Level 2 Style | ### Key Considerations 1. **Case Sensitivity**: The `propertyName` parameter is case-insensitive, but it is best practice to write it in standard lowercase CSS format (e.g., `"font-size"`, not `"fontSize"`). 2. **Shorthand Properties**: When querying shorthand properties (like `margin` or `background`), behavior can vary across browsers. It is highly recommended to query specific longhand properties (like `margin-top` or `background-color`) to ensure consistent results. 3. **Read-Only Declarations**: If the `CSSStyleDeclaration` object is read-only (such as some system-defined styles), calling this method will still work to retrieve the priority, but you will not be able to modify it using `setProperty()`.