javascript - 使用 javascript 的元素转换

Question

堆栈溢出和 Web 开发新手 --

背景:

我正在用一个未知 填充一个 div，并且不断改变我使用 PHP 从服务器检索的数据量(文本)。我希望文本可读且大小不变，所以我想大约 5-7 行可以放在 div 中。有时候，可能有比 div 容纳的更多的数据，它会溢出页面。

我想知道是否有一种方法可以识别 div 溢出，而不是溢出 div，我希望它暂停 10 秒，然后将当前 div 替换为新的 div 的其余部分信息。我正在想象新 div 的“淡出”，有点像幻灯片。如有任何建议或帮助，我们将不胜感激。

这是我目前拥有的静态、非过渡 div 的片段:

            <div class = "content-box subtext">
                <?php
                    foreach($sprintHash as $name => $value) {
                        echo "$name =>";
                        foreach($value as $ticket) {
                            echo "$ticket | ";
                        }
                        echo "<br>";
                    }
                ?>
            </div>

尝试查看 CSS3 转换，仍然不确定如何检测何时发生溢出。

Answer 1

您可以计算出您的内容需要多长时间才能使您的 div 溢出(即大约多少个字符)。然后，加载内容后，使用javascript检查div的innerHTML的长度

document.getElementById('id').innerHTML.length

并检查这是否大于您的溢出值。如果我理解您要正确执行的操作，您应该有如下所示的内容:

var overflowLength=100; //100 characters is when your div overflows
window.onload = function()
{
     if(document.getElementById('mydiv').innerHTML.length>overflowLength)
     {
         changeHeight('mydiv');
     }
}

这应该可以完成您正在尝试做的事情 - 但话虽如此，您可能希望使用 css 来解决这个问题。如果可以的话，也许可以重新考虑您的布局。

编辑:改进的答案我对此进行了测试，它似乎有效。

function(){
var mydiv = document.getElementById('mydiv');
if(mydiv.clientHeight<mydiv.scrollHeight)
{
    changeHeight();
}
}