CSSStyleDeclaration cssText Property: CSS Text
The cssText property of the CSSStyleDeclaration interface in CSS allows you to get or set all the CSS rules associated with a particular style declaration as a text string. It provides a way to access and modify the entire CSS styling of an element in a single operation. This property is particularly useful for reading, modifying, or replacing the complete set of CSS rules applied to an element.
What is the cssText Property?
The cssText property represents the serialized CSS rules of a style declaration. It returns a string containing all the CSS properties and their values. When setting this property, the provided string replaces the entire set of CSS rules for that style declaration.
Purpose of the cssText Property
The primary purposes of the cssText property are to:
- Read CSS Rules: Retrieve all CSS rules applied to an element as a single string.
- Modify CSS Rules: Change the entire set of CSS rules by assigning a new string.
- Replace CSS Rules: Completely replace the existing CSS rules with a new set of rules.
Syntax
Getting the cssText Value
To retrieve the CSS rules as a text string:
let cssString = element.style.cssText;
Setting the cssText Value
To set or replace the CSS rules:
element.style.cssText = "css-rules-string";
Possible Attributes
The cssText property does not have attributes. It is a property that holds a string value representing the CSS rules.
| Attribute | Type | Description |
|---|---|---|
| `cssText` | String | A string representing all the CSS rules applied to an element. When set, it replaces all existing CSS rules. |
Examples
Here are several examples demonstrating how to use the cssText property in different scenarios.
Example 1: Getting CSS Text
This example shows how to retrieve the CSS rules of an element and display them.
<!DOCTYPE html>
<html>
<head>
<title>Get CSS Text</title>
<style>
#myElement1 {
color: blue;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="myElement1">This is an element with CSS styles.</div>
<button id="getButton1">Get CSS Text</button>
<p id="output1"></p>
<script>
const element1 = document.getElementById("myElement1");
const getButton1 = document.getElementById("getButton1");
const output1 = document.getElementById("output1");
getButton1.addEventListener("click", function() {
const cssText1 = element1.style.cssText;
output1.textContent = "CSS Text: " + cssText1;
});
</script>
</body>
</html>
Output:
When the “Get CSS Text” button is clicked, the CSS rules applied directly to the myElement1 element are retrieved and displayed in the paragraph element. Note that only inline styles are reflected through element.style.
Example 2: Setting CSS Text
This example demonstrates how to set the CSS rules of an element using the cssText property.
<!DOCTYPE html>
<html>
<head>
<title>Set CSS Text</title>
</head>
<body>
<div id="myElement2" style="color: green;">This element will have its style changed.</div>
<button id="setButton2">Set CSS Text</button>
<script>
const element2 = document.getElementById("myElement2");
const setButton2 = document.getElementById("setButton2");
setButton2.addEventListener("click", function() {
element2.style.cssText = "color: red; font-size: 20px;";
});
</script>
</body>
</html>
Output:
Initially, the text color is green. After clicking the “Set CSS Text” button, the text color changes to red, and the font size becomes 20px, demonstrating the application of the new CSS rules.
Example 3: Replacing CSS Rules
This example shows how to replace the existing CSS rules of an element with a new set of rules.
<!DOCTYPE html>
<html>
<head>
<title>Replacing CSS Rules</title>
<style>
#myElement3 {
color: purple;
font-size: 18px;
}
</style>
</head>
<body>
<div id="myElement3">This element's styles will be replaced.</div>
<button id="replaceButton3">Replace CSS</button>
<script>
const element3 = document.getElementById("myElement3");
const replaceButton3 = document.getElementById("replaceButton3");
replaceButton3.addEventListener("click", function() {
element3.style.cssText = "color: orange; font-style: italic;";
});
</script>
</body>
</html>
Output:
Initially, the text is purple and has a font size of 18px (defined in the style tag). After clicking the “Replace CSS” button, the text becomes orange and italic, replacing the original styles.
Example 4: Clearing CSS Rules
This example demonstrates how to clear all the CSS rules of an element by setting cssText to an empty string.
<!DOCTYPE html>
<html>
<head>
<title>Clearing CSS Rules</title>
<style>
#myElement4 {
color: teal;
font-weight: bold;
}
</style>
</head>
<body>
<div id="myElement4">This element's styles will be cleared.</div>
<button id="clearButton4">Clear CSS</button>
<script>
const element4 = document.getElementById("myElement4");
const clearButton4 = document.getElementById("clearButton4");
clearButton4.addEventListener("click", function() {
element4.style.cssText = "";
});
</script>
</body>
</html>
Output:
Initially, the text is teal and bold. After clicking the “Clear CSS” button, the text reverts to its default style, as all inline CSS rules have been removed.
Example 5: Using cssText with Computed Styles (Not Recommended)
This example illustrates that cssText only reflects inline styles and does not capture styles from CSS classes or style sheets.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text with Computed Styles</title>
<style>
.styled {
color: navy;
font-size: 22px;
}
</style>
</head>
<body>
<div id="myElement5" class="styled">This element has styles from a CSS class.</div>
<button id="getButton5">Get CSS Text</button>
<p id="output5"></p>
<script>
const element5 = document.getElementById("myElement5");
const getButton5 = document.getElementById("getButton5");
const output5 = document.getElementById("output5");
getButton5.addEventListener("click", function() {
const cssText5 = element5.style.cssText;
output5.textContent = "CSS Text: " + cssText5; // This will be empty
});
</script>
</body>
</html>
Output:
Clicking the “Get CSS Text” button will display an empty string because cssText only reflects inline styles set directly on the element, not styles applied through CSS classes or stylesheets.
Note: The cssText property only reflects inline styles set directly on the element. It does not capture styles applied through CSS classes or stylesheets. If you need to retrieve all styles applied to an element, including those from CSS classes and stylesheets, you should use window.getComputedStyle(). 💡
Browser Support
The cssText property is widely supported across all modern web browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Conclusion
The cssText property of the CSSStyleDeclaration interface provides a convenient way to get and set the CSS rules of an element as a text string. It is useful for reading, modifying, or replacing the entire set of CSS rules. However, it is important to remember that cssText only reflects inline styles and does not capture styles applied through CSS classes or stylesheets. Understanding this distinction allows you to effectively use cssText for dynamic styling and manipulation of CSS properties in your web applications.
