HTMLElement

`HTMLElement.prototype.style`

Gets or sets the inline style of an element as a CSSStyleDeclaration object

Syntax

JavaScript

element.style.property = value

Parameters

Parameter	Type	Description
property	string	The CSS property to set
value	string	The value for the CSS property

Return Value

A CSSStyleDeclaration object representing the element's inline style

Examples

Basic Usage

const el = document.querySelector('.box') as HTMLElement
el.style.backgroundColor = 'blue'
el.style.padding = '20px'

Practical Example

function fadeIn(el: HTMLElement, ms: number) {
  el.style.opacity = '0'
  el.style.transition = `opacity ${ms}ms`
  requestAnimationFrame(() => { el.style.opacity = '1' })
}

Advanced Usage

const card = document.querySelector('.card') as HTMLElement
Object.assign(card.style, {
  border: '1px solid #ccc',
  borderRadius: '8px',
  padding: '16px'
})

Understanding HTMLElement.prototype.style

The HTMLElement.prototype.style method in JavaScript gets or sets the inline style of an element as a CSSStyleDeclaration object. It belongs to the HTMLElement object and is one of the most widely used methods for working with htmlelement values in modern JavaScript and TypeScript applications.

The method signature is element.style.property = value. It accepts 2 parameters: property, value. When called, it returns a cssstyledeclaration object representing the element's inline style. Understanding when and how to use style() helps you write more expressive, readable code.

Common use cases for HTMLElement.prototype.style include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-classlist-add, dom-setattribute, dom-getcomputedstyle, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for HTMLElement.prototype.style is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.