Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element?
I have researched methods like using getMatchedCSSRules and checking out
However, I am hesitant to use the cssutilities library because it does not update dynamically if changes are made to stylesheets on the page via Javascript. It creates its own rules array that needs to be constantly updated after any changes made using Javascript in any style tags.
The goal is to replicate what getMatchedCSSRules provides in Chrome but with an additional property for each rule's property, indicating whether it is currently active or overridden by another class.
This functionality should be compatible with Webkit and Firefox (I am utilizing a polyfill for Gecko for getMatchedCSSRules)
The desired return format would look something like this - CSSRulesAffectingElement = {
rule : {
text:"<css rule's text>",
properties : {
property1:{value:<value>,status:<active,cancelled>}
}
}
}
For example - //indicating when fontsize is coming from a different rule
colorclass:
{
csstext:'background-color:red;font-size:12px',
properties:
{
Background-color:
{
value:'red',
status:'active'
},
Font-size:
{
value:'12px',
status:'cancelled'
}
}
}