Manipulating Style Properties

In general, it is recommended to change styling with classList.toggle(), classList.add(), and/or classList.remove() whenever possible, especially when switching between two states. However, if more direct or continuous control is required, setting the value of a style.property string or using the style.setProperty() method may be a better fit.

element.style.propertyName = "value";

// or

style.setProperty("property-name", "value");

When using the property string approach, propertyName can be replaced with most familiar CSS styling properties, converted to camelCase as needed for hyphenated names (e.g. backgroundColor).

When using the method approach, the 'property-name' string can be any standard CSS property without modification, such as 'background-color' or 'font-size'.

For the 'value', units usually need to be appended using string concatenation e.g. by adding 'px' or 'rem' to the end of a variable or number.

See the Pen Manipulating Style Properties (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.