Imtiaz Rayhan

How To Change CSS Styles Using JavaScript

·

Imtiaz Rayhan

CSS (Cascading Style Sheets) is a stylesheet language used to define the look and formatting of a document written in a markup language. With JavaScript, it’s possible to change the style of a page dynamically by modifying the values of CSS properties.

Here’s an example to illustrate how to change CSS with JavaScript:

// Get the element with the ID "my-element"
var element = document.getElementById("my-element");

// Change the background color of the element to red
element.style.backgroundColor = "red";

In the above example, we first get a reference to the element with the ID “my-element” using the getElementById() function. We then modify the backgroundColor property of the element’s style object to change its background color to red.

Changing style by changing the class with JavaScript

It’s also possible to add or remove CSS classes to an element to change its style. For example:

// Get the element with the ID "my-element"
var element = document.getElementById("my-element");

// Add the "highlight" class to the element
element.classList.add("highlight");

// Remove the "lowlight" class from the element
element.classList.remove("lowlight");

In the above example, we use the classList property of the element to add the “highlight” class and remove the “lowlight” class. This will change the element’s style according to the CSS rules defined for these classes.

Using setProperty() Method to Change Style

Here’s an example of using the setProperty() method to change CSS with JavaScript:

// Get the element with the ID "my-element"
var element = document.getElementById("my-element");

// Set the font-size property of the element to 20px
element.style.setProperty("font-size", "20px");

// Set the color property of the element to red
element.style.setProperty("color", "red");

In the above example, we first get a reference to the element with the ID “my-element” using the getElementById() function. We then use the setProperty() method on the element’s style object to set the font-size and color properties. This will change the element’s font size and color according to the specified values.

It’s also possible to specify a priority for the CSS property using the setProperty() method. For example:

// Get the element with the ID "my-element"
var element = document.getElementById("my-element");

// Set the font-size property of the element to 20px with a "important" priority
element.style.setProperty("font-size", "20px", "important");

// Set the color property of the element to red with a "normal" priority
element.style.setProperty("color", "red", "normal");

In the above example, we use the setProperty() method to set the font-size and color properties with different priorities. The “important” priority will override any other styles that might be applied to the element, while the “normal” priority will be overridden by any styles with a higher priority.

To sum up, it’s possible to change the style of an element on a web page using JavaScript by modifying its CSS properties or by adding and removing CSS classes. I hope this helps! Let me know if you have any questions.

In:

,