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;