I would like to use a different ccs file based on a javascript click event. The user will have a choice of color themes by clicking one of the colored buttons on the screen. I originally have it working by providing the linked css with an id that can be targeted with javascript. The link is in the HTML head tag of course. In WordPress though we enqueue the css file in the functions.php file and so I am not sure how to give the css file an ID to target it with the javascript. If anyone can help me out or point me in the right direction I will really appreciate it. I am open to all possibilities and I thank you all in advance. if you need me to elaborate more feel free to let me know.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
I think you’re working too hard!
My approach to this would be to load all the stylesheets, then use JS to manipulate the BODY with an appropriate modifying class.
An example
You have 3 stylesheets: default.css, red.css, blue.css. Load them all on page load.
default.css body { background: #ccc; color: black;}
red.css body.red { background: red; color: white;}
blue.css body.blue { background: blue; color: white;}
Then just use JS to modify the classes on the BODY tag and the CSS will follow.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0