Advanced CSS style declaration management with property setting, priority handling, and CSS text serialization capabilities.
Comprehensive CSS style declaration container that manages CSS properties with full support for priorities, serialization, and dynamic manipulation.
/**
* CSS style declaration container for managing CSS properties
*/
class CSSStyleDeclaration {
constructor();
/** Number of CSS properties in the declaration */
length: number;
/** Parent rule containing this declaration */
parentRule: CSSRule;
/** Complete CSS text representation of all properties */
cssText: string;
/**
* Get the value of a CSS property
* @param {string} name - Property name
* @returns {string} Property value or empty string if not set
*/
getPropertyValue(name): string;
/**
* Set a CSS property with optional priority
* @param {string} name - Property name
* @param {string} value - Property value
* @param {string} [priority] - Priority ("important" or empty string)
*/
setProperty(name, value, priority?): void;
/**
* Remove a CSS property
* @param {string} name - Property name to remove
* @returns {string} Previous value of the property or empty string
*/
removeProperty(name): string;
/**
* Get the priority of a CSS property
* @param {string} name - Property name
* @returns {string} Priority ("important" or empty string)
*/
getPropertyPriority(name): string;
// Placeholder methods (not implemented)
getPropertyCSSValue(): void;
getPropertyShorthand(): void;
isPropertyImplicit(): void;
}Usage Examples:
const { parse, CSSStyleDeclaration } = require("cssom");
// Create new style declaration
const style = new CSSStyleDeclaration();
// Set properties
style.setProperty("color", "red");
style.setProperty("background", "blue", "important");
style.setProperty("margin", "10px");
console.log(style.length); // 3
console.log(style.getPropertyValue("color")); // "red"
console.log(style.getPropertyPriority("background")); // "important"
// Access via stylesheet parsing
const sheet = parse("body { color: red; background: blue !important; }");
const bodyStyle = sheet.cssRules[0].style;
console.log(bodyStyle.color); // "red"
console.log(bodyStyle.getPropertyPriority("background")); // "important"Multiple ways to access and manipulate CSS properties.
const { parse } = require("cssom");
const sheet = parse(`
.container {
width: 100%;
height: 200px;
margin: 10px 20px;
padding: 5px !important;
}
`);
const style = sheet.cssRules[0].style;
// Direct property access
console.log(style.width); // "100%"
console.log(style.height); // "200px"
// Method-based access
console.log(style.getPropertyValue("margin")); // "10px 20px"
console.log(style.getPropertyPriority("padding")); // "important"
// Array-like access
for (let i = 0; i < style.length; i++) {
const propName = style[i];
const propValue = style.getPropertyValue(propName);
const propPriority = style.getPropertyPriority(propName);
console.log(`${propName}: ${propValue}${propPriority ? ' !' + propPriority : ''}`);
}Comprehensive CSS text serialization and parsing.
const { parse, CSSStyleDeclaration } = require("cssom");
// Parse CSS text into declarations
const sheet = parse("div { color: red; background: blue !important; }");
const style = sheet.cssRules[0].style;
console.log(style.cssText);
// "color: red; background: blue !important;"
// Set complete CSS text
const newStyle = new CSSStyleDeclaration();
newStyle.cssText = "font-size: 16px; font-weight: bold; color: green;";
console.log(newStyle.length); // 3
console.log(newStyle.getPropertyValue("font-size")); // "16px"
console.log(newStyle.getPropertyValue("font-weight")); // "bold"
// CSS text updates when properties change
newStyle.setProperty("color", "purple", "important");
console.log(newStyle.cssText);
// "font-size: 16px; font-weight: bold; color: purple !important;"Advanced property manipulation and management patterns.
const { CSSStyleDeclaration } = require("cssom");
const style = new CSSStyleDeclaration();
// Add multiple properties
const properties = {
"margin": "10px",
"padding": "5px",
"border": "1px solid black",
"background-color": "white"
};
Object.entries(properties).forEach(([name, value]) => {
style.setProperty(name, value);
});
console.log(style.length); // 4
// Remove specific properties
const removedValue = style.removeProperty("margin");
console.log(removedValue); // "10px"
console.log(style.length); // 3
// Check if property exists
console.log(style.getPropertyValue("margin")); // "" (empty - was removed)
console.log(style.getPropertyValue("padding")); // "5px"
// Override with importance
style.setProperty("padding", "20px", "important");
console.log(style.getPropertyPriority("padding")); // "important"Comprehensive CSS priority and !important handling.
const { parse } = require("cssom");
const sheet = parse(`
.element {
color: red;
background: blue !important;
margin: 10px;
padding: 5px !important;
}
`);
const style = sheet.cssRules[0].style;
// Check priorities
console.log(style.getPropertyPriority("color")); // ""
console.log(style.getPropertyPriority("background")); // "important"
console.log(style.getPropertyPriority("padding")); // "important"
// Set property with priority
style.setProperty("margin", "20px", "important");
console.log(style.getPropertyPriority("margin")); // "important"
// Remove priority by setting without it
style.setProperty("background", "green"); // No priority specified
console.log(style.getPropertyPriority("background")); // ""Proper handling of invalid operations and edge cases.
const { CSSStyleDeclaration } = require("cssom");
const style = new CSSStyleDeclaration();
// Accessing non-existent properties
console.log(style.getPropertyValue("non-existent")); // ""
console.log(style.getPropertyPriority("non-existent")); // ""
// Removing non-existent properties
const removed = style.removeProperty("non-existent");
console.log(removed); // ""
// Setting properties with various values
style.setProperty("valid-property", ""); // Empty value is valid
style.setProperty("number-property", "123");
style.setProperty("complex-property", "calc(100% - 20px)");
// All are accessible
console.log(style.getPropertyValue("valid-property")); // ""
console.log(style.getPropertyValue("number-property")); // "123"
console.log(style.getPropertyValue("complex-property")); // "calc(100% - 20px)"Understanding the internal structure for advanced usage.
const { CSSStyleDeclaration } = require("cssom");
const style = new CSSStyleDeclaration();
style.setProperty("color", "red", "important");
style.setProperty("background", "blue");
// Internal properties (non-standard access)
console.log(style._importants); // Object tracking priority status
console.log(style._importants.color); // "important"
console.log(style._importants.background); // undefined
// Array-like behavior
console.log(style[0]); // First property name
console.log(style[1]); // Second property name
console.log(style.length); // Total property count