Eyad Syria-lover Posted September 21, 2016 Share Posted September 21, 2016 I've Been Analyzing W3.CSS When I Found A Strange Thing. I Found That !important Rule Is Used More 90 Times In This Framework,The Problem Here Is That !important Is Paralyzing The Ability To Manipulate Some Of Those Elements Who Carries Some Of The w3-* Classes Using Javascript,For Example: .w3-deep-purple,.w3-hover-deep-purple:hover { color:#fff !important; background-color:#673ab7 !important; } As You Can See,I Can't Manipulate Any Element Which Carries The .w3-deep-purple Class Because The !important Rule Has Disabled Style Manipulation Using JavaScript,This Means That The Following Code Is Useless: function changeFontColor() { document.getElementsByClassName("w3-deep-purple")[0].style.color="orange"; } Although This Code Is 100% Valid,But This Just Won't Work Because Of !important. I Suggest Removing This Rule From The Future Versions Of W3.CSS In Order To Give The Ability To The Developer To Add More Interactivity To His Projects. Link to comment Share on other sites More sharing options...
Ingolme Posted September 21, 2016 Share Posted September 21, 2016 I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML. To work around this, you can change the class name of the element instead: document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange"; 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2016 Share Posted September 21, 2016 You could use cssText document.getElementsByClassName("w3-deep-purple")[0].style.cssText+="color:orange !important;"; 1 Link to comment Share on other sites More sharing options...
Eyad Syria-lover Posted September 21, 2016 Author Share Posted September 21, 2016 I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML. To work around this, you can change the class name of the element instead: document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange"; That Seems Fair To Me,But The Problem Still About How To Manipulate The Color Using JavaScript If There Is No Class Name For That Color In W3.CSS,For Example There's No Class Name ".w3-deep-pink" (hex=#FF1493) For That Color... In Your Opinion,Should I Contact Them To Fix This? 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