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;