CSS manipulation is preferable than style modification. className Replaces the whole string of classes. $0.className // 'unhide font-weight-600' $0.className = 'new-class' $0.className // 'new-class' classList special object with methods to add/remove/toggle a single class iterable, we can list all classes with for..of classList.add() adds the class el.classList.add("class") classList.remove() removes the class el.classList.remove("class") classList.contains() checks for the given class, returns true/false el.classList.contains("class") classList.toggle() adds the class if it doesn’t exist, otherwise removes it el.classList.toggle("class") style el.style is an object that corresponds to what’s written in the style attribute operates only on the value of the style attribute, w/o any CSS cascade For multi-word property the camelCase is used Browser-prefixed properties like -moz-border-radius also follow the same rule: a dash means upper case elem.style.width = "100px" elem.style.backgroundColor // background-color elem.style.zIndex // z-index elem.style.borderLeftWidth // border-left-width document.body.style.backgroundColor = prompt('background color?', 'green') button.style.MozBorderRadius = '5px'; button.style.WebkitBorderRadius = '5px'; Mind the units. document.body.style.margin = 20 // doesn't work! document.body.style.margin = '20px' // works // browser “unpacks” the property style.margin in the last lines and // infers style.marginLeft and style.marginTop from it style.cssText sets full style attribute rarely used removes all existing styles we can safely use it for new elements, when we know we won’t delete an existing style div.style.cssText=`color: red !important; background-color: yellow; width: 100px; text-align: center; ` Same can be done via... document.body.setAttribute('style', 'color: red; background-color: yellow;') getComputedStyle() getComputedStyle(element, [pseudo]) the style property operates only on the value of the style attribute, w/o any CSS cascade we can’t read anything that comes from CSS classes getComputedStyle requires the full property name getComputedStyle actually returns the resolved value, usually in 'px' it is a a value after all CSS rules and CSS inheritance is applied A resolved style value is the one finally applied to the element units are fixed and absolute, for ex. height:20px or font-size:16px does not give access to the color of :visited pseudo class due to privacy reason getComputedStyle(document.body) // object with styles, like elem.style, but with respect to all CSS classes getComputedStyle(document.body).font // "300 14px Roboto, sans-serif" getComputedStyle(document.body).color // "rgb(0, 0, 0)" setProperty / removeProperty You may add and delete css prop directly in styles object element.style.zoom = '2' element.style.zoom = '' Or via function setProperty element.style.setProperty('zoom', '2') element.style.getPropertyValue('zoom') element.style.removeProperty('zoom') it is cool, coz you do not have to use kebab case and use same keys as in css element.style.setProperty( 'background-color', '#fafafa' )