使用JS更改CSS中的剪辑

Question

所以我正在制作一个HP栏，当剩下的健康状况下降时我需要缩短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中用333更改了remaininginingHealth时，它显示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);
    }

你可以看到＆＃34; remainingHealth＆＃34;是无效的CSS，remainingHealth是你的javascript代码中的一个字符串是我试图向你展示的，它不是你设置为333的整数值的var remainingHealth。

你需要这样做：

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

Javascript＆＃34; kind＆＃34;足以将int var remainingHealth转换为字符串值＆＃34; 333＆＃34;为你的字符串连接。