Change JS on CSS change

Question

Something I'm playing with and need to know if it's even possible or am I spinning my wheels.

I have a personal project that's working on allowing me to change the CSS for a given site/page based on a dropdown selection. That part is going fine.

Something I'm realizing, though, is that I'm bloating up one single script.js with various ways to treat the elements in each style. Is there a way that I could make each style use a different JS file so that I can keep the style-relevant JS separate from each other? Also, can this be done without loading up ALL the JS files at the beginning but rather load them in as needed, like I'm doing with the CSS?

maybe instead of depending css values to change js file you could depend on the value of the dropdown selection? In both case you would need to teardown everything — user1763370
– user1763370, Commented Nov 28, 2018 at 22:19

Tyler Becks · Accepted Answer · 2018-11-28 22:19:58Z

1

Webpack would help with splitting up the js into different files. Maybe something as simple as import/export?

To answer your question about only loading what you need, tree shaking will prevent your bundle from bloating. Dynamic imports might be helpful too.

answered Nov 28, 2018 at 22:19

Tyler Becks

5274 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reverend Bubbles Over a year ago

This site (for now) is a simple site - no webpacking involved, but reading the links you posted helped generate an idea in my head. When I change CSS, I save a cookie with the CSS file I'm using. Which means my JS DOES have access to the knowledge of which file I'm using so perhaps I could use that either to create code blocks or in conditionals. I'll try that out. Thanks.

Reverend Bubbles Over a year ago

I also realize that, to be true to my cause, I shouldn't have to change any JS simply because of a CSS change so maybe I'll accept the challenge of it being a pure CSS change! :)

Collectives™ on Stack Overflow

Change JS on CSS change

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related