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

正常工作，请参阅demo

因此，问题是在DOM上加载元素之前脚本正在运行。将脚本放在HTML

之后

<div id="health" style="background-color:green;min-height:5px;"></div>
<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>

Answer 2

您必须等到文档（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+"%");   
});

DEMO：http://jsfiddle.net/DerekL/uUBVd/

enter image description here

Answer 3

您正在加载元素之前执行JavaScript。将脚本块放在html中的div之后。

修改

或者，将代码放在onload处理程序中。

window.onload = function () { 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+"%"; }

或者，根本不要使用JavaScript。只需将值直接发送到div的样式属性中即可。

修改：此外，请勿在加载页面后使用document.write()。如果您对document.write()的来电发表评论，则可以：http://jsfiddle.net/2KLQq/

请注意，如果您取消注释我的jsfiddle中的document.write()并运行它，它将不再有效。

Answer 4

您的问题可能是因为<script>在呈现<div>之前执行，请尝试更换这些元素并查看其是否有效。

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

<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>

Answer 5

问题是，您需要检测何时加载DOM，然后运行计算。

您可以使用window.onload检测窗口何时加载并运行功能。如果您使用的是jQuery，则可以使用$(document).ready();或$(window).load();。

<html>
<head>
<script type="text/javascript">
    window.onload = function(){
        var hp = 500; //hardcoded, normally outputted via php <?=$row['hp']; ?>
        var max = 2500; //hardcoded, normally output via php <?=$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>
</head>
<body>
    <div id="health" style="background-color:green;min-height:5px;"></div>
</body>
</html>

在JS中更改div宽度的百分比

5 个答案:

正常工作，请参阅demo