Изменение клипа в CSS с помощью JS

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 вместо оставшегося здоровья (333px). Но когда я изменяю stayiningHealth с 333 в style.clip, он отображает 333px, поэтому он работает.

Answer 1

Так что есть немного путаницы в том, как вы смотрите на это, я думаю.

Так что, когда вы пишете яваскрипт код:

var remainingHealth =333; 

Значения переменной 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 код, что я пытаюсь показать вам, что это не вар remainingHealth, что вы установите на целое значение 333.

Вам нужно сделать:

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

Javascript достаточно «добр», чтобы преобразовать int var elseHealth в строковое значение «333» для вашей конкатенации строк.