在JS中更改div寬度的百分比
[英]Percentage to change div width in JS
問題描述
我有一個非常基本的腳本，計算和更改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;
任何想法為什么它可能不起作用？
5 個解決方案
解決方案1
1 2012-03-22 02:38:32
它的工作，看一個演示
所以，問題是在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>
解決方案2
1 已采納 2012-03-22 03:07:21
您必須等到文檔（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/ ： http://jsfiddle.net/DerekL/uUBVd/
解決方案3
0 2012-03-22 02:38:15
您在加載元素之前執行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的style屬性中。
編輯：此外，在加載頁面后不要使用document.write() 。 如果你注釋掉你對document.write()調用，它的工作原理是： http ： //jsfiddle.net/2KLQq/
請注意，如果您在我的jsfiddle中取消注釋document.write()並運行它，它就不再有效。
解決方案4
0 2012-03-22 02:38:18
您的問題可能是因為<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>
解決方案5
0 2012-03-22 03:00:46
問題是，您需要檢測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>
將PHP數據拉入JS以動態更改屏幕寬度上的BG圖像
[英]Pulling PHP data into JS to dynamically change BG image on screen width
用於根據原始寬度設置圖像寬度的Javascript公式，但以百分比為單位
[英]Javascript formulae for setting image width basing on its original width but in percentage
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.