如何在 JavaScript 中添加或减去元素的宽度

Question

我有一个条，其中一半是红色，另一半是绿色。 我希望它从红色元素中减去 1vw。

style.width deos 不起作用。

这是我的代码：

//FIGHT
document.addEventListener("keydown", battle)
function battle(event){
   console.log(event.code)
   document.getElementById("ClickRed").style.width -= "1vw"

   }
      

Answer 1

您可以使用offsetWidth和offsetHeight来获取元素在 DOM 上占用的总宽度和高度。 你可以在这里阅读更多

为了解决您的特定用例，我个人认为如果您使用像素而不是视口宽度和高度会更好，因为offsetWidth和offsetHeight将以像素而不是vw和vh返回宽度和高度。

如果您的宽度和高度以像素为单位，您可以这样使用它：-

rb.style.width = `${rb.offsetWidth - 100}px`

Answer 2

尝试这个：

document.getElementById("ClickRed").style.width=(parseFloat(document.getElementById("ClickRed").style.width) - 1) + "vw";