@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<style> 
    /*add the CSS style from here, it also works well.*/
/*    #myDIV {
      height:300px;
      background-color:#FFFFFF;
    }
    #div2 {
      border: 1px solid black;
      background-color: yellow;
      width: 200px;
      height: 100px;
      position: relative;
      top: 80px;
      left: 20px;
      padding: 20px;
    }
    #div1 {
      border: 1px solid black;
      position: relative;
      left: 50px;
      padding: 20px;
      background-color: lightblue;
      width: 200px;
      height: 100px; 
    } 
      .opake {
          opacity: 0.5;
      }
            .opake2 {
          opacity: 0.2;
      }*/
</style>

 <div id="myDIV">
     <input type="button" id="btnchange" onclick="ChangeOpacity()" value="ChangeOpacity" />
  <div id="div2">A yellow DIV element.</div>
  <div id="div1">Change the opacity of the blue DIV.</div>
</div>

@*<link href="~/css/IndexStyleSheet.css" rel="stylesheet"  />*@
<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here 
     let thumbnailElement = document.querySelector("#div1");
     thumbnailElement.classList.add("opake");
})();

//change the CSS style. remove the existing class and add the new class.
function ChangeOpacity(){
     let thumbnailElement = document.querySelector("#div1");
      thumbnailElement.classList.remove("opake");
     thumbnailElement.classList.add("opake2");
} 
</script>