HTML - DOM style Property

Quiz

The HTML DOM style property is used to get the CSS styles that are directly set for a particular element.

It gives access inline CSS properties for that particular element, excluding styles from the <head> section or any external style sheet.

Syntax

Following is the syntax of the HTML DOM style (to set the style) property −

element.style.propertyName = value;

Where, the "value" is a new value you want to apply to the CSS property of a particular element.

To get the already used style property, use the following syntax −

element.style.propertyName;

Parameters

This property does not accept any parameter.

Return Value

The style property returns a object that holds the inline CSS styles applied to a particular element.

Example 1: Applying Inline Styles to a Paragraph Element

The following program demonstrates how to use the HTML DOM style property to apply a style to a paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head> 
<style> 
   .highlighted {
     background-color: lightblue;
     padding: 10px;
     border: 1px solid blue;
   }
   button{
       padding: 8px 10px;
   }
</style>
</head>
<body>
<p id="myPara">Click the below button to change my style!</p>
<button onclick="changeStyle()">Change Style</button>
<script>
   function changeStyle() {
      // Get the paragraph element
      let para = document.getElementById('myPara');
      
      // Apply new styles using the style property
      para.style.backgroundColor ='green';
      para.style.color = 'white';
      para.style.fontWeight = 'bold';
      para.style.padding = '15px';
      para.innerHTML = 'Style Changed!';
   }
</script>
</body>
</html>

The above programs add a style to a paragraph ("p") element when the button is clicked.

Example 2: Changing the color of a paragraph on Each Click

Following is another example of the HTML DOM style property. We use this property to update the text color of a paragraph ("p") element when the button is clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   #colorfulText {
     font-size: 24px;
     font-weight: bold;
     margin-top: 20px;
   }
   button{
       padding: 8px 10px;
   }
</style>
</head>
<body>
<p>Click the below to update the style..</p>
<p id="colorfulText">Click the button to see colorful text!</p>
<button onclick="changeColor()">Generate Colorful Text</button>
<script>
   function changeColor() {
      let t=document.getElementById('colorfulText');
      let col= ['red','green','blue','orange','purple'];
      let randomColor = col[Math.floor(Math.random() * col.length)];
      t.style.color = randomColor;
      t.innerHTML = `Colorful Text in ${randomColor.toUpperCase()}`;
   }
</script>
</body>
</html>

The program above adds a new color to a paragraph each time the button is clicked.

Example 3: Applying Highlight Effect to a Button Element

In the example below, the DOM style property is used to change an element's appearance by applying a highlight effect to a button when clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   button{
       padding: 8px 10px;
       cursor: pointer;
   }
</style>
</head>
<body>
<p>Click the below button to add a highlight effect to it.<p> 
<button id="myButton">Click to Highlight</button>
<script>
   let bn = document.getElementById('myButton');
   //Add event listener to the button
   bn.addEventListener('click', function() {
      // Change the background color using style property
      bn.style.backgroundColor = 'green';
      bn.style.color = 'white';
      bn.style.border = 'none';
      bn.innerHTML = 'Highlighted!';
   });
</script>
</body>
</html>

Once the above program is executed, a button is displayed, when it is clicked a style will be added to this button.

Supported Browsers

Property
style	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page