Ex No: 9 SET BACKGROUND COLOR
Aim: To write a JavaScript code to set the background color of elements in HTML.
Algorithm
Step1: Create a folder “Ex9” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use document.getElementById and document.getElementsByTagName method to get the paragrap, header and footer object.
Step4: Use style.background property to set the background color of the selected elements.
Step5: When Pagaraph is clicked change the background color.
Source Code

index.html


<!DOCTYPE html>
<html>
   <head>
      <title>Set Background Color</title>   
   <style>
     header {
      text-align:center;
      height: 100px;
      background-color: silver;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
     }
     footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: silver;
      padding: 10px;
      margin-top: 20px;
      border-radius: 10px;
     }
     article{
      width: auto;
      padding: 10px;
      margin:5px;
      overflow-x: auto;
     }
     table, td, th{
      border: 1px solid;
      border-collapse: collapse;
     }
   </style>
   <script type="text/javascript">
   function change()
   {
      let bgColor = ["#bfff7b", "#1aae8b", "#dc89ab", "#a0a0dd", "#ef3215"];
      index = Math.round(Math.random()*(4-0))+0;
      index1 = Math.round(Math.random()*(4-0))+0;
      document.getElementById("myPara").style.background = bgColor[index];
      document.getElementsByTagName("header")[0].style.background = bgColor[index1];
      document.getElementsByTagName("footer")[0].style.background = bgColor[index1];
   }
   </script>
   </head>
   <body>      
      <header>
         <h1>Set Background Color</h1>
      </header>   
      <hr>
      <p id="myPara" onclick="change()">The color of this paragraph, header and footer present in this page can be changed using JavaScript.</p>
      <footer>
         Developed by K Anbarasan
      </footer>
   </body>
</html>
Result: Thus JavaScript code is written to set background color of elements in HTML.