Jclu Posted May 31, 2018 Share Posted May 31, 2018 here comes an example stripped from all unnecessary stuff : <style> .Kgreen { background-color:green; display:block; } </style> <h1 id="pp" >Hello World!</h1> <button onclick="setStyRed()">chg P5 red via js'style</button> <button onclick="setStyBlu()">chg P5 blue via js'style</button> <button onclick="setClaGre()">chg P5 green via className</button> <script> setStyRed=function() { pp.style.backgroundColor ="red" ; } setStyBlu=function() { pp.style.backgroundColor ="blue"; } setClaGre=function() { pp.classList.toggle("Kgreen") ; } </script> setting background-color to green via setClaGre works great... but once the backgroundColor is set via style, it seems to be impossible to change it again via classes (kinda precedence of the forme on the latter?) ... tried this on good ol'presto based Opera, and rev*cent FFox and Chrome. Am i doing smthing wrong or is that to be accepted? any pointer really appreciated, thank you JClu 201805314 Link to comment Share on other sites More sharing options...
Ingolme Posted May 31, 2018 Share Posted May 31, 2018 The style attribute always takes precedence over a stylesheet definition. If you want to reset it then use Javascript to set the style to an empty string. You should either do everything with classes or everything with the style attribute, don't mix them. The class option is better since the stylesheet gets to decide how to display each element. Link to comment Share on other sites More sharing options...
Jclu Posted June 2, 2018 Author Share Posted June 2, 2018 (edited) thks for the quick reply. understood about SS>Classes though i'd like a ref. stating so confirming the fact CSS are to be implemented by all browsers that way. and i cannot agree more on the flexibility of classes as they allow "context changes" to have more predictable behaveour of the elts. thks again JClu 201806026 Edited June 2, 2018 by Jclu Link to comment Share on other sites More sharing options...
Ingolme Posted June 2, 2018 Share Posted June 2, 2018 Here's an article by Mozilla explaining the logic that all browsers use to calculate CSS priority: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity Here's the actual official standard by the W3C, it basically says what Mozilla's article says but in more technical terms: https://www.w3.org/TR/selectors/#specificity https://www.w3.org/TR/css-style-attr/#interpret Link to comment Share on other sites More sharing options...
Jclu Posted June 4, 2018 Author Share Posted June 4, 2018 (edited) Thank you a lot, these articles made it perfectly clear how the precedence (based on specificity and some exceptions like "direct styling" targeted here). I find it sad, though,that a (page) global option wouldn't exist to override that specific exception (at least) without causing the debugging trouble met by "!important". bah! i am a mere user that now knows one more thing to be aware of in order to avoid problems : 1. like you said earlier : no mixing styling methods that "collide" 2. beware of existing badly written libs that might circumvent that 1st rule 3. a difficult one at times : specify semantically (classes) as much as possible to save time in later evolutions. now let's enjoy some rainy day 🙂 un grand merci jclu 201806041 Edited June 4, 2018 by Jclu Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now