title: How do I adjust a size of a box and it's opacity based on what webpage is loaded?
body: <p>I have three boxes that I would like to change it's width, height, and opacity based on what webpage is loaded. I am unsure what I need to change in my javascript, so any help would be really helpful.    </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;body onload="setDark()"&gt;
      &lt;a href="siteone.html"&gt;
        &lt;div class="firstbox" id="fBox"&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="sitetwo.html"&gt;
        &lt;div class="secondbox" id="sBox"&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="sitethree.html"&gt;
        &lt;div class="thirdbox" id="tBox"&gt;&lt;/div&gt;
      &lt;/a&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>function setDark() {
    var currentPage = window.location.href;
    var boxOne = document.getElementById("fBox");
    var boxTwo = document.getElementById("sBox");
    var boxThree = document.getElementById("tBox");
    if (currentPage === "siteone.html") {
      document.getElementById("fBox").style.width = "100px";
      document.getElementById("fBox").style.height = "100px";
      document.getElementById("fBox").style.opacity = 0.6;
    }
    if (currentPage === "secondpage.html") {
      document.getElementById("sBox").style.width = "100px";
      document.getElementById("sBox").style.height = "100px";
      document.getElementById("sBox").style.opacity = 0.6;
    } else {
      document.getElementById("tBox").style.width = "100px";
      document.getElementById("tBox").style.height = "100px";
      document.getElementById("tBox").style.opacity = 0.6;
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/dpvumw0o/" rel="nofollow noreferrer">https://jsfiddle.net/dpvumw0o/</a></p>