具有简单可变高度的 Div答案

【问题标题】：Div with a simple variable height具有简单可变高度的 Div
【发布时间】：2015-06-17 16:55:16
【问题描述】：

所以，我想创建一个高度与我将从数据库中获取的值相同的 div。为了更好地理解，该值是客户在网站上购买的次数。我正在想办法让我的 div 随着价值的上升而上升。

类似这样的：

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

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

逻辑是让我的 div 为每个值数字增加 10 像素。因此，如果值为 10，则高度应为 100px。

对我来说，实现此解决方案的最佳方式是什么？有我想的那么简单吗？（简单！= 简单）。

【问题讨论】：

对于初学者，您需要 numberOfValues * 10，而不是 +10 :)
您是否需要在不刷新页面的情况下发生这种情况？
不是真的，我不想要动画方面的解决方案，我只想根据值改变高度。
你知道如何用ajax从数据库中获取价值吗？
这实际上是我不知道该怎么做的事情。如何从数据库中获取值并将其放入该变量中？或者如何在我的 JS 逻辑中使用它？

标签： javascript html css variables height

【解决方案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 来查询数据库。

【讨论】：

从数据库中获取值后，我将应用此方法，但我认为这是正确的。谢谢！
没问题@RobertoCrossa

【解决方案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>

【讨论】：

你为什么用样式标签包围 Javascript？