Get all CSS properties for a class or id with Javascript/JQuery

1月
24
2020
By 筅森魡賤

Use document#styleSheets and extract all rules from all stylesheets into array. Then filter the array by the selectorText.

Note: I've used a simple Array#includes to check if the requested selector appears in selectorText, but you might want to create a stricter check to prevent false positives. For example the selector text .demo can find rules for .demogorgon as well.

const findClassRules = (selector, stylesheet) => {
  // combine all rules from all stylesheets to a single array
  const allRules = stylesheet !== undefined ? 
    Array.from((document.styleSheets[stylesheet] || {}).cssRules || []) 
    :  
    [].concat(...Array.from(document.styleSheets).map(({ cssRules }) => Array.from(cssRules))); 
  
  // filter the rules by their selectorText
  return allRules.filter(({ selectorText }) => selectorText && selectorText.includes(selector)); 
};

console.log(findClassRules('.demo', 0));
.demo {
  color: red;
}

.demo::before {
  content: 'cats';
}

You can do:

window.getComputedStyle($('[your class name]')[0])

Check out https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle for more information.

javascript
jquery
css