MENU
Working with CSS
The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify a CSS style dynamically.
There are 3 ways to access CSS in JavaScript.
RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
p{
color:red;
}
</style>
<style>
p{
border:1px solid brown;
}
body {
background: yellow;
}
</style>
</head><body><p style="background: orange;">
And the bartender says, "Success, but you're not ready!" So a JavaScript function walks into a bar.</p><script> // Method 1: getComputedStyle()
var ele = document.getElementsByTagName("p")[0];
var style = getComputedStyle(ele); // read-only
console.log(style.cssText); //(all the properties & values)
console.log(style.length); // 280
console.log(style.parentRule); // null
console.log(style.getPropertyValue("font-size")); // 16px
console.log(style["font-size"]); // 16px
console.log(style["fontSize"]); // 16px
console.log(style.fontSize); // 16px
console.log(ele.style.fontSize);//(empty string),not inlineconsole.log(ele.style.getPropertyPriority("font-size")); // (empty string),not inline// style.setProperty("color","blue","important"); // DOMException // Method 2: element.style.X
ele.style.fontSize = "17px";
console.log(ele.style.fontSize); // 17px
... inline now
console.log(ele.style.color); // (empty string),not inline
console.log(ele.style.background); // orange
ele.style.setProperty("color","blue","important");
console.log(ele.style.color); // blue
... inline now
console.log(ele.style.getPropertyPriority("color")); // "important" // Method 3: document.stylesheets[].cssRules[]
console.log(document.styleSheets[0].cssRules[0].cssText); // p {color:red !important;}console.log(document.styleSheets[0].cssRules[0].style.color); // redconsole.log(document.styleSheets[1].cssRules.length); // 2 ... ie. for <p> and <body>console.log(document.styleSheets.length); // 2
.. two <style> elementsconsole.log(document.styleSheets[0].cssRules[0].type); // 1 (ie. .STYLE.RULE)
console.log(style.item(3)); // animation-fill-mode
console.log(style[3]); // animation-fill-mode</script></body></html>
Type | Value |
CSSRule.STYLE_RULE | 1 |
CSSRule.IMPORT_RULE | 3 |
CSSRule.MEDIA_RULE | 4 |
CSSRule.FONT_FACE_RULE | 5 |
CSSRule.PAGE_RULE | 6 |
CSSRule.KEYFRAMES_RULE | 7 |
CSSRule.KEYFRAME_RULE | 8 |
Reserved for future use | 9 |
CSSRule.NAMESPACE_RULE | 10 |
CSSRule.COUNTER_STYLE_RULE | 11 |
CSSRule.SUPPORTS_RULE | 12 |
CSSRule.DOCUMENT_RULE | 13 |
CSSRule.FONT_FEATURE_VALUES_RULE | 14 |
CSSRule.VIEWPORT_RULE | 15 |
CSSRule.REGION_STYLE_RULE | 16 |
A CSSRule of type STYLE_RULE implements a rule-specific interface of CSSStyleRule, and so on. |
Get all CSS rules for the document using Array methods.
RESETRUNFULL
RESETRUNFULL
const allCSS = [...document.styleSheets]
.map(styleSheet => {
try {
return [...styleSheet.cssRules]
.map(rule => rule.cssText)
.join('');
} catch (e) {
console.log('Access to stylesheet %s is denied. Ignoring...',
styleSheet.href);
}
})
.filter(Boolean)
.join('\n');
(https://developer.mozilla.org/en-US/docs/Web/API/
StyleSheetList)