2

Is it possible to specify a class or an ID and get all the CSS rules for that particular class or ID. I don't mean an element, I want to specify a class and return all CSS for that class.

I know I can use .style to get inline styles but I don't need inline, it has to come from the stylesheet.

Is it even possible with JS? Can it access the .css file and return a list of properties for a certain class?

Apologies for no code, it's more of a theoretical question although if someone has a function at hand, I'd be happy to study it.

Varin
  • 2,354
  • 2
  • 20
  • 37

3 Answers3

2

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.

Joe Lissner
  • 2,181
  • 1
  • 15
  • 21
  • Thanks, but this gets all styles associated with an element. I don't wan't elements style as one element can have multiple classes, and above function will return all rules for all the classes. I want to be able to get all css rules just for that one class or ID, not an element. – Varin Aug 01 '17 at 21:32
  • Ah, I see. I just found this other stack overflow answer that might be more of what you are looking for. https://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery If this works let me know and I'll update my answer to point others in the right direction – Joe Lissner Aug 01 '17 at 21:48
2

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';
}
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • This definitely helps a lot. I'm not that great in vanilla JS... How can I modify the above code to be able to feed just one specific stylesheet? (for example `document.styleSheets[2]`) as Chrome returns a NULL error if one of the stylesheets is not local. – Varin Aug 01 '17 at 22:35
  • I've added the ability to request a single style sheet by index. – Ori Drori Aug 01 '17 at 22:41
0

using jquery :

$(your element Id or class ).attr('style')

it will return all css Properties

left: 75px; top: -59px; transform: rotate(0deg) scaleX(2.32432) scaleY(3.83333);

if you need just one or more (you know which prop you need)

$(your element Id or class).css([
      "width", "height", "fontSize", "fontFamily", 'textAlign', 'fontWeight', 
      'fontStyle','textDecoration','letterSpacing', 'lineHeight'])

I am using react and trying to avoid jquery but for style issues I did't find faster and easier

M_Badrah
  • 437
  • 5
  • 6
  • 3
    It will be much better to add some details. – jizhihaoSAMA Jun 16 '20 at 12:44
  • 2
    While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – ysf Jun 16 '20 at 16:36