Syntax
element.style.propertyName = value;
getComputedStyle(element).propertyNameExamples
Setting Inline Styles Directly
Reading and writing an element's own inline style properties.
const box = document.querySelector("#box");
box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.fontSize = "1.5rem"; // camelCase for hyphenated CSS properties
console.log(box.style.backgroundColor); // "blue" - only reflects inline styles set this waygetComputedStyle() - The Real Rendered Value
Getting the actual applied style, regardless of where it came from (CSS file, class, or inline).
// Even if color is set via an external CSS class, not inline:
const box = document.querySelector("#box");
const styles = getComputedStyle(box);
console.log(styles.color); // the actual rendered color, from any source
console.log(styles.fontSize); // always returns a computed pixel value, like "16px"
console.log(box.style.color); // "" - empty, since color was not set inlineBest practices
- Use element.style for styles your own script sets directly - use CSS classes with classList for styles that come from a stylesheet
- Use getComputedStyle() when you need to read the actual current visual value of a property, no matter its source
- Remember getComputedStyle() returns resolved values (like pixels), not the original units used in the stylesheet (like rem or %)
- Prefer toggling CSS classes over directly setting element.style in application code, for cleaner separation between structure/behavior and presentation
At a glance
- Purpose
- Application logic and interaction
- File extension
- .js · .mjs
- Runs in
- Browsers and JavaScript runtimes
- Usually used with
- HTML, CSS and Web APIs
Specifications & further reading
Related JavaScript documentation
DOM Selection: querySelector(), getElementById()
These methods find elements in the DOM. getElementById() finds a single element by its unique id, generally the fastest option. querySelector() finds the first element matching any valid CSS selector, and querySelectorAll() returns all matching elements as a static NodeList.Creating and Modifying Elements
createElement() builds a new DOM element in memory, which can then be customized and inserted into the page with methods like appendChild() or append(). textContent sets plain text safely, while innerHTML parses and inserts HTML markup - which carries injection risks if the content includes untrusted user input.classList: add, remove, toggle, contains
The classList property provides a convenient API for managing an element's CSS classes without manually parsing the className string. add() and remove() add or remove one or more classes, toggle() switches a class on or off based on its current presence, and contains() checks whether a class is currently applied.IntersectionObserver
IntersectionObserver efficiently detects when an element enters or exits the viewport (or another container), without the performance cost of manually listening to scroll events and calculating positions. It is the standard tool for lazy-loading images, infinite scroll, and scroll-triggered animations.
These methods find elements in the DOM. getElementById() finds a single element by its unique id, generally the fastest option. querySelector() finds the first element matching any valid CSS selector, and querySelectorAll() returns all matching elements as a static NodeList.Creating and Modifying Elements
createElement() builds a new DOM element in memory, which can then be customized and inserted into the page with methods like appendChild() or append(). textContent sets plain text safely, while innerHTML parses and inserts HTML markup - which carries injection risks if the content includes untrusted user input.classList: add, remove, toggle, contains
The classList property provides a convenient API for managing an element's CSS classes without manually parsing the className string. add() and remove() add or remove one or more classes, toggle() switches a class on or off based on its current presence, and contains() checks whether a class is currently applied.IntersectionObserver
IntersectionObserver efficiently detects when an element enters or exits the viewport (or another container), without the performance cost of manually listening to scroll events and calculating positions. It is the standard tool for lazy-loading images, infinite scroll, and scroll-triggered animations.