Skip to content
Advertisement

How can I adjust the window innerwidth according to the percentage?

I try to adjust the window.innerwidth according to percentage but I don’t know what to do. MY goal is depending on the size of window.innerwidth, change the backgroundcolor of html. window.innerwidth can’t use percentages when comparing?

I tried like this.

const resizeColor = function() {
  let width = window.innerWidth;
  if (width >= "90%") {
    document.body.style.backgroundColor = "red";
  } else if (width < "90%" && "60%" <= width) {
    document.body.style.backgroundColor = "blue";
  } else {
    document.body.style.backgroundColor = "white";
  }
};

Advertisement

Answer

"90%" isn’t a valid value for innerWidth property. I think you meant 90% of outerWidth. Try out the following in Full page

const resizeColor = function() {
  let width = window.innerWidth;
  let vw = window.outerWidth; // viewport-width

  if (width >= 0.9 * vw) {
    document.body.style.backgroundColor = "red";
  } else if (width < 0.9 * vw && 0.6 * vw <= width) {
    document.body.style.backgroundColor = "blue";
  } else {
    document.body.style.backgroundColor = "white";
  }
};

window.onresize = resizeColor;
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement