php - JS中改变div宽度的百分比

Question

我有一个非常基本的脚本，可以计算和更改 div 的宽度，但它不起作用，它一直给出 100% 的结果。

我的脚本是这样的:

<script>
var hp = <? echo $row['hp']; ?>;
var max = <? echo $row['maxhp']; ?>;
var perc = Math.round(hp/max * 100);
if(perc > 100) perc = 100;
else if(perc < 0 ) perc = 0;
d = document.getElementById('health');
d.style.width= perc+"%";
</script>

<div id="health" style="background-color:green;min-height:5px;"></div>

PHP 数字在 JS 中显示正确，如下所示:

var hp = 500;
var max = 2500;

有什么想法可能无法正常工作吗？

Answer 1

您必须等待文档(DOM)首先加载。

//head

$(function(){      //same as "onload" (jQuery)
    var hp = 500,
        max = 2500,
        perc = Math.round(hp/max * 100);
    if(perc > 100){
        perc = 100;
    }else if(perc < 0 ){
        perc = 0; 
    }
      //have to wait until DOM loaded, or else it return "not found"
    d = document.getElementById('health');
    d.style.width= perc+"%";
    alert(perc+"%");   
});​

演示:http://jsfiddle.net/DerekL/uUBVd/