最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

css - Conditionally enqueue a stylesheet based off of a javascript click event

programmeradmin2浏览0评论

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.

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.

Share Improve this question asked Aug 18, 2020 at 22:49 Jah RikJah Rik 33 bronze badges 1
  • Would this work for you? developer.wordpress/reference/functions/wp_localize_script – Tony Djukic Commented Aug 20, 2020 at 17:35
Add a comment  | 

1 Answer 1

Reset to default 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.

发布评论

评论列表(0)

  1. 暂无评论