Just as we can modify the elements and structure of the DOM, we can also change their styles.
Style manipulation in JavaScript can be done through two main methods:
- Direct style modification: Changing the style values of elements.
- CSS class manipulation: Adding, removing, or toggling classes that define styles.
Direct CSS Style Modification
With JavaScript, you can directly change the CSS properties of an element. This is done using the element’s style property and assigning values to the CSS properties you want to modify.
| Command | Description |
|---|---|
element.style.cssProperty = 'value' | Changes the style directly. |
Expand to see more style properties
| Command | Description |
|---|---|
element.style.cssProperty = 'value' | Changes the CSS style directly inline. |
element.style.color = 'blue' | Changes the text color. |
element.style.backgroundColor = 'yellow' | Changes the element’s background color. |
element.style.fontSize = '18px' | Adjusts the font size. |
element.style.width = '200px' | Defines the element’s width. |
element.style.height = '100px' | Defines the element’s height. |
element.style.margin = '10px' | Adjusts the element’s margin. |
element.style.padding = '15px' | Adjusts the element’s internal padding. |
element.style.border = '2px solid black' | Sets a border for the element. |
element.style.borderRadius = '5px' | Defines the border corner radius. |
element.style.boxShadow = '2px 2px 10px gray' | Applies shadow to the element. |
Let’s see some examples
You can change color and background properties using the color and backgroundColor properties.
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
Properties like fontSize, width, height, margin, and padding allow you to adjust the size and spacing of elements.
element.style.fontSize = '18px';
element.style.width = '200px';
element.style.height = '100px';
element.style.margin = '10px';
element.style.padding = '15px';
You can add borders and shadows using properties like border, borderRadius, and boxShadow.
element.style.border = '2px solid black';
element.style.borderRadius = '5px';
element.style.boxShadow = '2px 2px 10px gray';
CSS Class Manipulation
Class manipulation is a more flexible and organized technique that avoids cluttering the code with inline styles.
We use the element’s classList property to add, remove, or toggle classes.
| Command | Description |
|---|---|
element.classList.add('class') | Adds a class to the element. |
element.classList.remove('class') | Removes a class from the element. |
element.classList.toggle('class') | Toggles a class on the element. |
add()
The add() method allows you to add one or more classes to an element, ensuring they are not duplicated. This is useful for applying styles or indicating a specific state of an element.
element.classList.add('active');
In this example, the active class is added to the element, which could, for instance, change its color or make it visible according to the styles defined in your CSS file.
remove()
The remove() method removes one or more classes from an element. It’s a practical way to revert a previously applied visual or functional state.
element.classList.remove('invisible');
Here, the invisible class is removed from the element, likely making the element visible again on the page if that class controlled its visibility.
toggle()
The toggle() method adds the class if it is not present and removes it if it is. This is especially useful for creating dynamic interactions with a single command.
element.classList.toggle('highlighted');
For example, this code could toggle a highlighted style on a button when clicked, enhancing the user experience with interactive behavior.
Using CSS Variables
Another way to modify an element’s style is by modifying a CSS variable. This variable will work in conjunction with the CSS stylesheets to format the element.
| Command | Description |
|---|---|
document.documentElement.style.setProperty('--variable', 'value') | Dynamically modifies the value of a custom CSS variable. |
Modify Variables with JavaScript:
document.documentElement.style.setProperty('--main-color', 'lightcoral');
Define Variable in CSS:
:root {
--main-color: lightblue;
}
#myElement {
background-color: var(--main-color);
}
Reading Computed Styles
We can also obtain the style currently applied to an element, including styles inherited or calculated by the browser:
| Command | Description |
|---|---|
window.getComputedStyle(element).property | Gets the computed value of a property. |
For example,
const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.backgroundColor);
Applying Transitions and Animations
We can also use JavaScript to apply CSS transitions and animations.
First define the rules in a CSS stylesheet and then use JavaScript to modify the properties that trigger these animations.
For example, to activate a transition,
Trigger Transition with JavaScript
element.style.backgroundColor = 'blue';
Define Transition in CSS
#myElement {
transition: background-color 0.5s ease;
}
