0

I need to get all CSS properties for each classes which matched a element.

I have the classnames of my element from

this.className

How can I now get all the css-styles for each classname?

Maybe I must compare or search in the stylesheets?

var sheets = document.styleSheets;

I only know the way to get the css-styles for the element but not for the classname.

Thanks for helping.

Update
This is no duplicate, I'm not looking for all kind of CSS properties. I looking specially only for the properties of a css-class, so I think it's a unique question.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
mikeD
  • 229
  • 2
  • 11
  • show your code please – לבני מלכה Mar 07 '19 at 11:05
  • there is no more code, its a generaly question how its possible to get the style-properties of a css-class from the stylesheets. – mikeD Mar 07 '19 at 11:13
  • Possible duplicate of [Can jQuery get all CSS styles associated with an element?](https://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) – לבני מלכה Mar 07 '19 at 11:16
  • This is no duclicate, i'm not looking for all kind of css properties. I looking specially only for the properties of a css-class, so i think it's a unique question – mikeD Mar 07 '19 at 11:21
  • Yes, `document.styleSheets` is the right keyword. You will have to go through all stylesheets, go through their rules, and see if the selector matches what you are looking for. (Having to deal with order and specificity might come on top of that.) – 04FS Mar 07 '19 at 11:26
  • If i trie "classes=sheets[i].cssRules;" i get a "SecurityError: The operation is insecure." – mikeD Mar 07 '19 at 12:55

2 Answers2

1

Use getAttribute to get the styles. This works for inline css only

document.querySelectorAll('.a').forEach(e=>console.log(e.getAttribute('style')))
<div class="a" style="color:red"></div>
<div class="a" style="color:blue"></div>
ellipsis
  • 12,049
  • 2
  • 17
  • 33
  • Yes thats the problem, i need to work with the styles from the stylesheet not from the inlinestyle. I must compare later inlinestyle with style of style-sheets. – mikeD Mar 07 '19 at 11:12
  • Check this out https://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element – ellipsis Mar 07 '19 at 11:17
  • i know this, but it helps me not much. I need a way only for getting the properties of one class not all possible styles... – mikeD Mar 07 '19 at 11:22
1

document.styleSheets[index] from this object you can get needed information for CSS class. You have to just write a function which will do a search within

document.styleSheets[0].cssRules or document.styleSheets[0].rules by checking

selectorText is equal to needed class name and then get that objects cssText or style.cssText property.

Emin Javadov
  • 140
  • 1
  • 8
  • yes i think that could be the way, can i check each stylesheet in a kind like that if(stylesheet[0].cssRules[classname_i_looking_for].length)...? – mikeD Mar 07 '19 at 11:39
  • Just check both of document.styleSheets[0].rules || document.styleSheets[0].cssRules properties in loop for selectorText equality to your css class name and then get same objects cssText property for declared css properties – Emin Javadov Mar 07 '19 at 11:59
  • mmh, could you make me s small example, my tries failed – mikeD Mar 07 '19 at 12:28