HTML Element .style Since: DOM Level 2（2000）

A property for manipulating the inline styles of an HTML element. You can get and set CSS properties through this object.

Syntax

// Get or set a style directly using a property name.
element.style.propertyName = "value";
var value = element.style.propertyName;

// Get or set the entire inline style string using cssText.
element.style.cssText = "property: value; property: value;";
var text = element.style.cssText;

// Use setProperty() / getPropertyValue() with CSS-notation property names.
element.style.setProperty("property-name", "value");
var value = element.style.getPropertyValue("property-name");

Properties and Methods

Property / Method	Description
style.propertyName	Gets or sets a CSS property directly using camelCase. Hyphenated property names must be converted to camelCase — for example, `background-color` becomes `backgroundColor`.
style.cssText	Gets or sets the entire inline style as a string. When setting, all existing inline styles are overwritten.
style.setProperty("name", "value")	Sets a value using a CSS-notation property name (hyphens are allowed as-is). Pass `"important"` as the third argument to add `!important`.
style.getPropertyValue("name")	Gets a value using a CSS-notation property name. Returns an empty string if the property is not set in the inline style.
style.removeProperty("name")	Removes the specified CSS property from the inline style.

Sample Code

<div id="box" style="width: 100px;">Box</div>

var box = document.querySelector("#box");

// Set styles directly by property name. Convert hyphenated names to camelCase.
box.style.backgroundColor = "blue";
box.style.fontSize = "20px";
box.style.color = "white";

// Retrieve a value using CSS notation with getPropertyValue().
console.log(box.style.getPropertyValue("background-color")); // Outputs "blue".

// Set a value using CSS notation with setProperty().
box.style.setProperty("border", "2px solid red");

// Set multiple styles at once with cssText. Existing styles are overwritten.
box.style.cssText = "width: 200px; height: 100px; background-color: green;";

// Remove a property with removeProperty().
box.style.removeProperty("height");

Overview

element.style is a property for manipulating the inline styles of an HTML element. Reading and writing via style.propertyName is the most straightforward approach, but hyphenated CSS property names must be converted to camelCase — for example, background-color becomes backgroundColor, and font-size becomes fontSize.

element.style only reflects inline styles. Styles applied via a CSS file or a <style> tag cannot be retrieved this way. To get the final computed style, use window.getComputedStyle().

Manipulating inline styles is convenient for debugging or temporary changes, but if you are simply toggling the appearance of an element, swapping classes with element.classList is generally easier to maintain.