DEV Community

Discussion on: Dynamically Change CSS Values

View post
Collapse
 
xwero profile image
david duymelinck • • Edited

The more modern way of using style is to use the power of css variables

/* css */
:root {
 --bg-input: white;
}

input {
  background-color: var(--bg-input);
}
Enter fullscreen mode Exit fullscreen mode 
/* js (in eventListener) */

document
  .querySelector('#yourInput')
  .style
  .setProperty('--bg-input', 'red');
Enter fullscreen mode Exit fullscreen mode

This way you only have to remember the css variables instead of the style document structure.

Collapse
 
zt4ff_1 profile image
Kayode •

Thanks David