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

Question

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

style.width不工作

下面是我的代码:

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

Answer 1

您可以使用offsetWidth和offsetHeight来获得元素在DOM上占用的总宽度和高度。你可以阅读更多关于Here

为了解决您的特定用例，我个人认为如果您使用像素而不是视口宽度和高度会更好，因为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";