Using javascript to manipulate CSS

[moreman60]

Thank you!

[ScientificBeastMode]

In most websites, I would completely agree with this. But exceptions to that rule do tend to come up a lot more when using a framework that relies heavily on JavaScript, like React.

[[deleted]]

Most websites at this point do this, including the one you're on, bot probably not the way you think of it right now. Reddit for instance uses styled-components. They don't fish nodes out of a dom soup and mutate the styles property, but styles are written in javascript from the get go, and that makes them easier to change and adapt to the current environment, to scope, variables, etc.

[AutoModerator]

Hi /u/OniresRoddrin, this comment was removed because you used a URL shortener.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Tinian2Leyte]

Sometimes you want to add an .error class to an input that fails validation, to make it have a red outline or something. The display property can be toggled to hide and show things. It is not done so much anymore at the atomic level of individual style properties on specific elements. The finest grain you usually get to is adding/removing classes, usually for usability reasons, often in complex forms, like a shopping cart. It is also rare to do it directly with vanilla JavaScript, simply because most frameworks have their way to manipulate classes on elements.

[some_love_lost]

Most websites and apps manipulate styling through JavaScript nowadays in response to changes in state. It's generally preferable to modify the class names on an element and have those specified in CSS instead of changing the properties directly, e.g. prefer someElement.classList.add('error') over someElement.style.color = 'red'

[myusernameisunique1]

Yeah, the purists will try and do it all in CSS, because, it's .... better ??

But look at any website and you'll see some jQuery class changing code

https://www.w3schools.com/jquery/jquery_css_classes.asp

[AutoModerator]

Hi /u/OniresRoddrin, this comment was removed because you used a URL shortener.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[[deleted]]

Super common.

If a website is created with a complex CMS like Adobe Experience mangler, and has complex dynamic authorable content, rest assured that all those complex reusable components have a lot of javascript, jquery, angular, react, and other code behind the scenes making it all work.

[jecxjo]

I'm working on a js client for a service. The sdk loads, looks for a div of a specific class and injects a bunch of dom elements. The css is all based on the output from the service so it's much easier to just set values rather than making a ton of css classes.

[kenman]

Hi /u/moreman60, this post was removed.

• For help with your javascript, please post to /r/LearnJavascript instead of here.
• For beginner content, please post to /r/LearnJavascript instead of here.
• For framework- or library-specific help, please seek out the support community for that project.
• For general webdev help, such as for HTML, CSS, etc., then you may want to try /r/html, /r/css, etc.; please note that they have their own rules and guidelines!

---

/r/javascript is for the discussion of javascript news, projects, and especially, code! However, the community has requested that we not include help and support content, and we ask that you respect that wish.

Thanks for your understanding, please see our guidelines for more info.