Language: EN
LuisLlamas Logo
Search
⏲️ ~ 4 minutes Intermediate
javascript-modificar-estilos-css-dom

Modify DOM Styles and CSS with JavaScript

Just as we can modify the elements and structure of the DOM, we can also change their styles.

Manipulating styles in JavaScript can be done through two main methods:

  • Direct style modification: Changing the style values of the elements.
  • Manipulation of CSS classes: Adding, removing, or toggling classes that define the styles.

Direct CSS Style Modification

With JavaScript, you can directly change the CSS properties of an element. This is done using the style property of the element and assigning values to the CSS properties you want to modify.

CommandDescription
element.style.cssProperty = 'value'Change the style directly.
Expand to see more style properties
CommandDescription
element.style.cssProperty = 'value'Change the inline CSS style directly.
element.style.color = 'blue'Change the text color.
element.style.backgroundColor = 'yellow'Change the background color of the element.
element.style.fontSize = '18px'Adjust the font size.
element.style.width = '200px'Define the width of the element.
element.style.height = '100px'Define the height of the element.
element.style.margin = '10px'Adjust the margin of the element.
element.style.padding = '15px'Adjust the internal padding of the element.
element.style.border = '2px solid black'Set a border for the element.
element.style.borderRadius = '5px'Define the border radius.
element.style.boxShadow = '2px 2px 10px gray'Apply shadow to the element.

Let’s see some examples

You can change the 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 properties to add, remove, or toggle classes.

CommandDescription
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 example, 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 is 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, probably 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 the style of an element is by modifying a CSS variable. This variable will work in conjunction with the CSS stylesheets to format the element.

CommandDescription
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 get the style currently applied to an element, including inherited or computed styles by the browser:

CommandDescription
window.getComputedStyle(element).propertyGets 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 trigger a transition,

Trigger Transition with JavaScript

element.style.backgroundColor = 'blue';

Define Transition in CSS

#myElement {
    transition: background-color 0.5s ease;
}

On this page