使用 JS 更改 CSS 中的剪辑答案

【问题标题】：Change clip in CSS with JS使用 JS 更改 CSS 中的剪辑
【发布时间】：2015-01-18 02:24:01
【问题描述】：

所以我正在制作一个生命值条，当剩余生命值减少时，我需要缩短生命值条的宽度。到目前为止，我已经写了这个。

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 控制宽度，所以屏幕上的宽度显示为 666 像素而不是剩余健康（333 像素）。但是当我在 style.clip 中使用 333 更改剩余健康时，它会显示 333px，所以它可以正常工作。

【问题讨论】：

【解决方案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 代码中的一个字符串，这是我试图向您展示的，它不是您设置为整数值 333 的 var remainingHealth。

你需要做的：

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

Javascript 足够“友好”，可以将 int var remainingHealth 转换为字符串值“333”以进行字符串连接。

【讨论】：