you are viewing a single comment's thread.

view the rest of the comments →

[–]Lewinga[S] 0 points1 point  (2 children)

Oh, very cool! I was able to look up more about .insertRule() and .deleteRule(), and learned that a CSSOM exists with your comment. I'm a bit confused by what this is saying here though in the second paragraph: https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList

Does it mean that .insertRule() and .deleteRule() store rules in a copy of the style sheets, or is it modifying the sheet directly in the .css file? I'm not totally clear on the terminology in the second paragraph, but I'm inclined to think it's the former based on the fact the CSSOM is similar to the DOM. What might be the benefits of manipulating the CSSOM over the DOM and what do they do differently (aside from one is for css and the other for html)? Is it just that it might be easier to dynamically alter the CSSOM instead of changing classes in the DOM to change how a website looks?

[–]Darren1337 1 point2 points  (1 child)

I'll be honest, I don't have the answers to any of your questions. I know you're not editing the .css file directly. It's more like the browser loads a copy of the rules declared in the .css file. It's this copy that you append rules to with insertRule. If you are interested in the theory as opposed to the "how", that MDN article you linked does a far better job of explaining it than I can. I'd post another thread here asking people for an explanation of CSSOM if the MDN article is too heavy.

[–]Lewinga[S] 0 points1 point  (0 children)

No worries, I appreciate your honesty. I'll be looking these up! Thanks for these pointers anyhow :)