具有簡單可變高度的Div

Question

因此，我想制作一個具有要從數據庫中獲取的值的高度的div。 為了更好地理解，該值是客戶在網站上購買的次數。 我正在考慮一種方法，使我的股利隨着價值的增長而上升。

像這樣：

var divHeight = numberOfValues;
numberOfValues = heightOfDiv; (div's height property)

if (numberOfValues == 0) {
   divHeight = 0;
} else {
    divHeight = numberOfValues + 10;
}

邏輯是讓我的div每個值數字增加10px。 因此，如果值為10，則高度應為100px。

對我而言，實現此解決方案的最佳方法是什么？ 像我想的那么簡單嗎？ （簡單！=容易）。

Answer 1

<?php
$numberOfPurchases = getNumberOfPurchases(); // call the function that queries the database
?>
<script>
var defaultDivHeight = 10;
var purchaseDiv = document.getElementById('purchaseDiv');
if (<?= numberOfPurchases; ?> > 0)
{
    purchaseDiv.style.height = <?= numberOfPurchases; ?> * defaultDivHeight + 'px';
}
else
{
    purchaseDiv.style.height = defaultDivHeight + 'px';
}
</script>

我建議考慮在PHP中使用PDO來查詢數據庫。

Answer 2

    <script>
       var divHeight = numOfVisits * 10;
       var divDisplay = document.getElementById("display");

       if(divHeight>0)
              divDisplay.style.height = divHeight + "px";
       else
              divDisplay.style.height = "1px";
    </script>