使用 JS 更改 CSS 中的剪辑

Question

所以我正在制作一个 HP 条，我需要在 remainingHealth 减少时缩短 HP 条的宽度。到此为止我已经写完了。

JS

var remainingHealth =333;
function update(){
    document.getElementById("nowbar").style.clip = "rect(0, remainingHealth, 90, 0)";
}

CSS

#nowbar {
    position: absolute;
    margin-top: -24px;
    margin-left: 5px;
    clip: rect(0px,666px,90px,0px)
}

我创建了一张图片来解释问题所在： http://i.imgur.com/UAd4J3b.png

所以问题是我无法用 JS 控制宽度，所以在屏幕上宽度显示为 666px 而不是 remainingHealth(333px)。但是，当我在 style.clip 中将 remaininingHealth 更改为 333 时，它显示 333px，所以它正在工作。

Answer 1

所以我认为你对此的看法有点混乱。

因此，当您编写 javascript 代码时：

var remainingHealth =333;

var remainingHealth 确实等于 333。它不等于 666 或以任何方式连接到 CSS 文件，正如您在图片中暗示的那样：http://i.imgur.com/UAd4J3b.png

问题是

document.getElementById("nowbar").style.clip

需要一个字符串值，您也给它一个字符串值，您设置 document.getElementById("nowbar").style.clip 的字符串值是：

"rect(0, remainingHealth, 90, 0)"

这与在您的 CSS 文件中所做的一样：

    #nowbar {
    position: absolute;
    margin-top: -24px;
    margin-left: 5px;
    clip: rect(0, remainingHealth, 90, 0);
    }

您可以看到 "remainingHealth" 无效 CSS，remainingHealth 是您 javascript 代码中的一个字符串，这就是我要向您展示的内容，它不是 var remainingHealth您设置为整数值 333.

您需要做的：

document.getElementById("nowbar").style.clip = "rect(0," + remainingHealth + "px, 90, 0)";

Javascript "kind" 足以将 int var remainingHealth 转换为字符串值“333”以进行字符串连接。

Change clip in CSS with JS