Programming for beginners: Changing the styles using JavaScript DOM

Sunday 30 September 2018

Changing the styles using JavaScript DOM

In my previous post, I explained how to access styles associated with an element. By using DOM, you can also set the style values.

Syntax

element.style.property = value;

process.js

function processData(){
 var para = document.getElementById("paragraph1");
 
 para.style.color = "red";
 alert("Color : " + para.style.color);
 
 para.style.backgroundColor = "white";
 alert("Background color : " + para.style.backgroundColor);
}

window.onload = processData;

styleAccess.html

<!DOCTYPE html>

<html>
 <head>
  <title>Accessing style properties</title>
  <script src="process.js"></script>
 </head>
 
 <body>
  
  <p id="paragraph1" style="color:white; background-color:black;">
   JavaScript is fun to learn
  </p>
 </body>
</html>

Previous Next Home

Programming for beginners

Sunday 30 September 2018

Changing the styles using JavaScript DOM

No comments:

Post a Comment