'How do you read CSS rule values with JavaScript?
I would like to return a string with all of the contents of a CSS rule, like the format you'd see in an inline style. I'd like to be able to do this without knowing what is contained in a particular rule, so I can't just pull them out by style name (like .style.width etc.)
The CSS:
.test {
width:80px;
height:50px;
background-color:#808080;
}
The code so far:
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<classes.length;x++) {
if(classes[x].selectorText==className) {
//this is where I can collect the style information, but how?
}
}
}
getStyle('.test')
Solution 1:[1]
Adapted from here, building on scunliffe's answer:
function getStyle(className) {
var cssText = "";
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
cssText += classes[x].cssText || classes[x].style.cssText;
}
}
return cssText;
}
alert(getStyle('.test'));
Solution 2:[2]
Since the accepted answer from "nsdel" is only avilable with one stylesheet in a document this is the adapted full working solution:
/**
* Gets styles by a classname
*
* @notice The className must be 1:1 the same as in the CSS
* @param string className_
*/
function getStyle(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes)
continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
var ret;
if(classes[x].cssText){
ret = classes[x].cssText;
} else {
ret = classes[x].style.cssText;
}
if(ret.indexOf(classes[x].selectorText) == -1){
ret = classes[x].selectorText + "{" + ret + "}";
}
return ret;
}
}
}
}
Notice: The selector must be the same as in the CSS.
Solution 3:[3]
SOLUTION 1 (CROSS-BROWSER)
function GetProperty(classOrId,property)
{
var FirstChar = classOrId.charAt(0); var Remaining= classOrId.substring(1);
var elem = (FirstChar =='#') ? document.getElementById(Remaining) : document.getElementsByClassName(Remaining)[0];
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
alert( GetProperty(".my_site_title","position") ) ;
SOLUTION 2 (CROSS-BROWSER)
function GetStyle(CLASSname)
{
var styleSheets = document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
if (styleSheets[i].rules ) { var classes = styleSheets[i].rules; }
else {
try { if(!styleSheets[i].cssRules) {continue;} }
//Note that SecurityError exception is specific to Firefox.
catch(e) { if(e.name == 'SecurityError') { console.log("SecurityError. Cant readd: "+ styleSheets[i].href); continue; }}
var classes = styleSheets[i].cssRules ;
}
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == CLASSname) {
var ret = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText ;
if(ret.indexOf(classes[x].selectorText) == -1){ret = classes[x].selectorText + "{" + ret + "}";}
return ret;
}
}
}
}
alert( GetStyle('.my_site_title') );
Solution 4:[4]
I've found none of the suggestions to really work. Here's a more robust one that normalizes spacing when finding classes.
//Inside closure so that the inner functions don't need regeneration on every call.
const getCssClasses = (function () {
function normalize(str) {
if (!str) return '';
str = String(str).replace(/\s*([>~+])\s*/g, ' $1 '); //Normalize symbol spacing.
return str.replace(/(\s+)/g, ' ').trim(); //Normalize whitespace
}
function split(str, on) { //Split, Trim, and remove empty elements
return str.split(on).map(x => x.trim()).filter(x => x);
}
function containsAny(selText, ors) {
return selText ? ors.some(x => selText.indexOf(x) >= 0) : false;
}
return function (selector) {
const logicalORs = split(normalize(selector), ',');
const sheets = Array.from(window.document.styleSheets);
const ruleArrays = sheets.map((x) => Array.from(x.rules || x.cssRules || []));
const allRules = ruleArrays.reduce((all, x) => all.concat(x), []);
return allRules.filter((x) => containsAny(normalize(x.selectorText), logicalORs));
};
})();
Here's it in action from the Chrome console.
Solution 5:[5]
Some browser differences to be aware of:
Given the CSS:
div#a { ... }
div#b, div#c { ... }
and given InsDel's example, classes will have 2 classes in FF and 3 classes in IE7.
My example illustrates this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
div#a { }
div#b, div#c { }
</style>
<script>
function PrintRules() {
var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<rules.length;x++) {
document.getElementById("rules").innerHTML += rules[x].selectorText + "<br />";
}
}
</script>
</head>
<body>
<input onclick="PrintRules()" type="button" value="Print Rules" /><br />
RULES:
<div id="rules"></div>
</body>
</html>
Solution 6:[6]
Here is code to iterate through all rules in a page:
function iterateCSS(f) {
for (const styleSheet of window.document.styleSheets) {
const classes = styleSheet.rules || styleSheet.cssRules;
if (!classes) continue;
for (const cssRule of classes) {
if (cssRule.type !== 1 || !cssRule.style) continue;
const selector = cssRule.selectorText, style=cssRule.style;
if (!selector || !style.cssText) continue;
for (let i=0; i<style.length; i++) {
const propertyName=style.item(i);
if (f(selector, propertyName, style.getPropertyValue(propertyName), style.getPropertyPriority(propertyName), cssRule)===false) return;
}
}
}
}
iterateCSS( (selector, propertyName, propertyValue, propertyPriority, cssRule) => {
console.log(selector+' { '+propertyName+': '+propertyValue+(propertyPriority==='important' ? ' !important' : '')+' }');
});Solution 7:[7]
function getStyle(className) {
document.styleSheets.item("menu").cssRules.item(className).cssText;
}
getStyle('.test')
Note : "menu" is an element ID which you have applied CSS. "className" a css class name which we need to get its text.
Solution 8:[8]
Have adapted julmot's answer in order to get a more complete result. This method will also return styles where the class is part for the selector.
//Get all styles where the provided class is involved
//Input parameters should be css selector such as .myClass or #m
//returned as an array of tuples {selectorText:"", styleDefinition:""}
function getStyleWithCSSSelector(cssSelector) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
var arStylesWithCSSSelector = [];
//in order to not find class which has the current name as prefix
var arValidCharsAfterCssSelector = [" ", ".", ",", "#",">","+",":","["];
//loop through all the stylessheets in the bor
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
//check for any reference to the class in the selector string
if(typeof classes[x].selectorText != "undefined"){
var matchClass = false;
if(classes[x].selectorText === cssSelector){//exact match
matchClass=true;
}else {//check for it as part of the selector string
//TODO: Optimize with regexp
for (var j=0;j<arValidCharsAfterCssSelector.length; j++){
var cssSelectorWithNextChar = cssSelector+ arValidCharsAfterCssSelector[j];
if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
matchClass=true;
//break out of for-loop
break;
}
}
}
if(matchClass === true){
//console.log("Found "+ cssSelectorWithNextChar + " in css class definition " + classes[x].selectorText);
var styleDefinition;
if(classes[x].cssText){
styleDefinition = classes[x].cssText;
} else {
styleDefinition = classes[x].style.cssText;
}
if(styleDefinition.indexOf(classes[x].selectorText) == -1){
styleDefinition = classes[x].selectorText + "{" + styleDefinition + "}";
}
arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText, "styleDefinition":styleDefinition});
}
}
}
}
if(arStylesWithCSSSelector.length==0) {
return null;
}else {
return arStylesWithCSSSelector;
}
}
In addition, I've made a function which collects the css style definitions to the sub-tree of a root node your provide (through a jquery selector).
function getAllCSSClassDefinitionsForSubtree(selectorOfRootElement){
//stack in which elements are pushed and poped from
var arStackElements = [];
//dictionary for checking already added css class definitions
var existingClassDefinitions = {}
//use jquery for selecting root element
var rootElement = $(selectorOfRootElement)[0];
//string with the complete CSS output
var cssString = "";
console.log("Fetching all classes used in sub tree of " +selectorOfRootElement);
arStackElements.push(rootElement);
var currentElement;
while(currentElement = arStackElements.pop()){
currentElement = $(currentElement);
console.log("Processing element " + currentElement.attr("id"));
//Look at class attribute of element
var classesString = currentElement.attr("class");
if(typeof classesString != 'undefined'){
var arClasses = classesString.split(" ");
//for each class in the current element
for(var i=0; i< arClasses.length; i++){
//fetch the CSS Styles for a single class. Need to append the . char to indicate its a class
var arStylesWithCSSSelector = getStyleWithCSSSelector("."+arClasses[i]);
console.log("Processing class "+ arClasses[i]);
if(arStylesWithCSSSelector != null){
//console.log("Found "+ arStylesWithCSSSelector.length + " CSS style definitions for class " +arClasses[i]);
//append all found styles to the cssString
for(var j=0; j< arStylesWithCSSSelector.length; j++){
var tupleStyleWithCSSSelector = arStylesWithCSSSelector[j];
//check if it has already been added
if(typeof existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] === "undefined"){
//console.log("Adding " + tupleStyleWithCSSSelector.styleDefinition);
cssString+= tupleStyleWithCSSSelector.styleDefinition;
existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] = true;
}else {
//console.log("Already added " + tupleStyleWithCSSSelector.styleDefinition);
}
}
}
}
}
//push all child elments to stack
if(currentElement.children().length>0){
arStackElements= arStackElements.concat(currentElement.children().toArray());
}
}
console.log("Found " + Object.keys(existingClassDefinitions).length + " CSS class definitions");
return cssString;
}
Note that if a class is defined several times with the same selector, the above function will only pick up the first. Note that the example uses jQuery (but cab relatively easily be rewritten to not use it)
Solution 9:[9]
const getStyle = query => [...document.querySelector(query).computedStyleMap().entries()].map(e=>(e[1]+=[],e)).map(e=>e.join`:`+';').join`\n`
In one line, prints out generated css for any query.
Solution 10:[10]
I made a similar helper function
which shows the unneeded styles for this page. appends a <div> to the body listing all styles that where not used.
(to be used with the firebug console)
(function getStyles(){var CSSrules,allRules,CSSSheets, unNeeded, currentRule;
CSSSheets=document.styleSheets;
for(j=0;j<CSSSheets.length;j++){
for(i=0;i<CSSSheets[j].cssRules.length;i++){
currentRule = CSSSheets[j].cssRules[i].selectorText;
if(!document.querySelectorAll(currentRule).length){
unNeeded+=CSSSheets[j].cssRules[i].cssText+"<br>";
}
}
}
docBody=document.getElementsByTagName("body")[0];
allRulesContainer=document.createElement("div");
docBody.appendChild(allRulesContainer);
allRulesContainer.innerHTML=unNeeded+isHover;
return false
})()
Solution 11:[11]
//works in IE, not sure about other browsers...
alert(classes[x].style.cssText);
Solution 12:[12]
This version will go through all of the stylesheets on a page. For my needs, the styles were usually in the 2nd to last of the 20+ stylesheets, so I check them backwards.
var getStyle = function(className){
var x, sheets,classes;
for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
for(x=0;x<classes.length;x++) {
if(classes[x].selectorText===className) {
return (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText);
}
}
}
return false;
};
Solution 13:[13]
I added return of object where attributes are parsed out style/values:
var getClassStyle = function(className){
var x, sheets,classes;
for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
for(x=0;x<classes.length;x++) {
if(classes[x].selectorText===className){
classStyleTxt = (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText).match(/\{\s*([^{}]+)\s*\}/)[1];
var classStyles = {};
var styleSets = classStyleTxt.match(/([^;:]+:\s*[^;:]+\s*)/g);
for(y=0;y<styleSets.length;y++){
var style = styleSets[y].match(/\s*([^:;]+):\s*([^;:]+)/);
if(style.length > 2)
classStyles[style[1]]=style[2];
}
return classStyles;
}
}
}
return false;
};
Solution 14:[14]
I created a version that searches all stylesheets and returns matches as a key/value object. You can also specify startsWith to match child styles.
getStylesBySelector('.pure-form-html', true);
returns:
{
".pure-form-html body": "padding: 0; margin: 0; font-size: 14px; font-family: tahoma;",
".pure-form-html h1": "margin: 0; font-size: 18px; font-family: tahoma;"
}
from:
.pure-form-html body {
padding: 0;
margin: 0;
font-size: 14px;
font-family: tahoma;
}
.pure-form-html h1 {
margin: 0;
font-size: 18px;
font-family: tahoma;
}
The code:
/**
* Get all CSS style blocks matching a CSS selector from stylesheets
* @param {string} className - class name to match
* @param {boolean} startingWith - if true matches all items starting with selector, default = false (exact match only)
* @example getStylesBySelector('pure-form .pure-form-html ')
* @returns {object} key/value object containing matching styles otherwise null
*/
function getStylesBySelector(className, startingWith) {
if (!className || className === '') throw new Error('Please provide a css class name');
var styleSheets = window.document.styleSheets;
var result = {};
// go through all stylesheets in the DOM
for (var i = 0, l = styleSheets.length; i < l; i++) {
var classes = styleSheets[i].rules || styleSheets[i].cssRules || [];
// go through all classes in each document
for (var x = 0, ll = classes.length; x < ll; x++) {
var selector = classes[x].selectorText || '';
var content = classes[x].cssText || classes[x].style.cssText || '';
// if the selector matches
if ((startingWith && selector.indexOf(className) === 0) || selector === className) {
// create an object entry with selector as key and value as content
result[selector] = content.split(/(?:{|})/)[1].trim();
}
}
}
// only return object if we have values, otherwise null
return Object.keys(result).length > 0 ? result : null;
}
I'm using this in production as part of the pure-form project. Hope it helps.
Solution 15:[15]
I faced the same problem. And with the help of guys I came up with a really smart solution that solve that problem totally (run on chrome ) .
Extract all images from the network
function AllImagesUrl (domain){
return performance.getEntries()
.filter( e=>
e.initiatorType == "img" &&
new RegExp(domain).test(e.name)
)
.map( e=> e.name.replace('some cleaning work here','') ) ```
Solution 16:[16]
Based on @dude answer this should return relevant styles in a object, for instance:
.recurly-input {
display: block;
border-radius: 2px;
-webkit-border-radius: 2px;
outline: 0;
box-shadow: none;
border: 1px solid #beb7b3;
padding: 0.6em;
background-color: #f7f7f7;
width:100%;
}
This will return:
backgroundColor:
"rgb(247, 247, 247)"
border
:
"1px solid rgb(190, 183, 179)"
borderBottom
:
"1px solid rgb(190, 183, 179)"
borderBottomColor
:
"rgb(190, 183, 179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"solid"
borderBottomWidth
:
"1px"
borderColor
:
"rgb(190, 183, 179)"
borderLeft
:
"1px solid rgb(190, 183, 179)"
borderLeftColor
:
"rgb(190, 183, 179)"
borderLeftStyle
:
"solid"
borderLeftWidth
:
"1px"
borderRadius
:
"2px"
borderRight
:
"1px solid rgb(190, 183, 179)"
borderRightColor
:
"rgb(190, 183, 179)"
borderRightStyle
:
"solid"
borderRightWidth
:
"1px"
borderStyle
:
"solid"
borderTop
:
"1px solid rgb(190, 183, 179)"
borderTopColor
:
"rgb(190, 183, 179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"solid"
borderTopWidth
:
"1px"
borderWidth
:
"1px"
boxShadow
:
"none"
display
:
"block"
outline
:
"0px"
outlineWidth
:
"0px"
padding
:
"0.6em"
paddingBottom
:
"0.6em"
paddingLeft
:
"0.6em"
paddingRight
:
"0.6em"
paddingTop
:
"0.6em"
width
:
"100%"
Code:
function getStyle(className_) {
var styleSheets = window.document.styleSheets;
var styleSheetsLength = styleSheets.length;
for(var i = 0; i < styleSheetsLength; i++){
var classes = styleSheets[i].rules || styleSheets[i].cssRules;
if (!classes)
continue;
var classesLength = classes.length;
for (var x = 0; x < classesLength; x++) {
if (classes[x].selectorText == className_) {
return _.pickBy(classes[x].style, (v, k) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )
}
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow