HTML Element .style

element.style.propertyName = "value";
var value = element.style.propertyName;

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");

<div id="card" style="padding: 10px;">product_x — zone_1</div>
<p id="status">item_a</p>
<button id="btn">Apply Style</button>

The following example shows how this works in practice:

var card = document.getElementById("card");

// Pattern 1: Set styles directly by property name (convert hyphens to camelCase)
card.style.backgroundColor = "#1a1a2e";
card.style.color = "white";
card.style.fontSize = "18px";
card.style.borderRadius = "8px";

// Pattern 2: Get an inline style value
console.log(card.style.backgroundColor); // Outputs "rgb(26, 26, 46)"

// Pattern 3: Set a property using CSS notation with setProperty()
card.style.setProperty("border", "2px solid #6200ea");

// Pattern 4: Get a property using CSS notation with getPropertyValue()
console.log(card.style.getPropertyValue("border")); // Outputs "2px solid rgb(98, 0, 234)"

// Pattern 5: Set multiple styles at once with cssText (overwrites all existing inline styles)
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
	card.style.cssText = "background-color: #6200ea; color: white; padding: 20px; border-radius: 8px;";
});

// Pattern 6: Remove a property with removeProperty()
card.style.removeProperty("border");
console.log(card.style.getPropertyValue("border")); // Returns an empty string.

View sample page

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.