---
title: "Explain the HTML DOM Style Object in JavaScript"
description: "here's we will learn about the HTML DOM Style Object in JavaScript with proper example."
author: "Ashutosh Patel"
published: 2025-02-17
updated: 2025-02-17
canonical: https://www.mindstick.com/articles/338562/explain-the-html-dom-style-object-in-javascript
category: "javascript"
tags: ["javascript", "javascript object"]
reading_time: 3 minutes
---
# Explain the HTML DOM Style Object in JavaScript
The style object in JavaScript allows you to dynamically change the CSS styles of [HTML elements](https://answers.mindstick.com/qa/93760/how-to-find-the-html-elements-by-using-javascript) using the `.style` [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin). It provides access to both inline styles and computed [styles of an element](https://www.mindstick.com/forum/158691/how-can-you-change-the-css-styles-of-an-element-using-jquery).
#### How to Access the Style Object?
**Using** `element.style` **(Inline Styles)**
- The `.style` property is used to **set or get** inline CSS styles.
```html
Style Object Example
This is the Para 1.
```
**Using** `window.getComputedStyle(element)` **(Computed Styles)**
- Retrieves the **actual (computed) styles** applied to an element, even styles set by [external](https://answers.mindstick.com/qa/31963/which-program-has-been-launched-by-the-union-ministry-of-external-affairs-mea-to-bring-indian-foreign-policy-to-students-across-the-country) stylesheets.
```html
Style Object Example
This is the Para 1.
```
#### Properties of the Style Object
The `.style` object provides access to various CSS [properties](https://www.mindstick.com/blog/673/properties) using JavaScript.
| **JavaScript Property** | **CSS Equivalent** |
| --- | --- |
| color | color |
| backgroundColor | [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp)-color |
| fontSize | font-size |
| border | border |
| margin | margin |
| padding | padding |
| display | display |
| [visibility](https://www.mindstick.com/blog/301300/how-to-improve-your-visibility-in-zero-click-search-results) | visibility |
| opacity | opacity |
#### Methods of the Style Object
`element.style.setProperty()` **– Set a CSS Property**
It allows setting styles using CSS syntax.
```javascript
myDiv.style.setProperty("background-color", "blue");
```
`element.style.getPropertyValue()` **– Get a CSS Property**
It retrieves the value of a specific CSS property.
```javascript
let bgColor = myDiv.style.getPropertyValue("background-color");
console.log(bgColor); // Outputs: blue
```
`element.style.removeProperty()` **– Remove a CSS Property**
It deletes a specific style property.
```javascript
myDiv.style.removeProperty("background-color");
```
####
#### Example: Change Styles Dynamically
```html
Style Object Example