Dynamically change the appearance of HTML element

Using plain JavaScript

There are various different ways to dynamically change the appearance of HTML elements. The easiest way to do this is to use getElementById() method on the native document interface. The argument to this method should be the ID of the element you want to select.

Once you have selected the element, then set the class property to a className value you want to set.

All of this is plain JavaScript, so you can embed it in the function, and run that function at certain times. For example, run the function when there’s a certain event, like click of a button.

Using CSS only

Sometimes you want to specify the component’s style when it is focused, or when a mouse hovers over it. In this case, you can use the :hover selector in addition to normal selectors. It can be paired with element selectors, class selectors, as well as id selector.

You can also use CSS to specify styles for certain resolutions of the screen. These are called media queries. You can specify CSS styles for mobile screens, tablets, smaller laptop screens, and large monitors. This is a great feature, because it allows you to build responsive web pages. Back in the old days, the layout of HTML page was the same for all screen sizes. Screen sizes are much more diverse today.

In React

Perhaps the easiest way to dynamically change HTML element’s appearance is to use a front-end framework. React, Vue and Angular are three most popular options. I have the most experience with React, so that’s the one I will discuss.

React components are structured with JSX. It’s a templating language that looks like HTML, but it’s JavaScript disguised as HTML. Therefore JSX allows you to write JavaScript expressions to determine a className value for example. By the way, React uses className because class is a reserved word.

In short, you can set the className attribute to a ternary operator that returns a certain value depending on whether condition is met or not. You can also set it to a template literal string, with embedded JavaScript expressions.

React also allows you to dynamically apply inline styles. It works just like you do in HTML. You specify the styles attribute of any element. However, instead of setting it to a text, in JSX you set the styles attribute to a JavaScript object. The property of this object represents the CSS property, and its value represents the CSS value. You can set the value to a ternary operator, so it will return a certain value if a condition is met, and other value otherwise. SimpleFrontEnd has excellent guide about styling and setting className values conditionally:

State is essential for making all of this work. ‘Changeable’ data like user inputs is stored in the state. We conditionally set className and inline styles depending on values in the state. Whenever these values change, React automatically rerenders the entire component tree. So if a user checks ‘dark mode’, that will trigger the change in the state, which will rerender the entire component tree. Once it is rendered, React will evaluate the conditional className or style and change the appearance of elements to match the dark mode.

You can find more React guides on https://simplefrontend.com/.