元素转换使用javascript
元素转换使用javascript
提问于 2014-07-21 16:03:22
新的堆栈溢出和web开发--
背景：
我正在使用一个未知的填充一个div，并不断地更改使用从服务器检索的数据量(文本)。我希望文本是可读的，并保持不变的大小，所以我认为大约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转换，但仍不确定如何检测何时发生溢出。
回答 1
Stack Overflow用户
发布于 2014-07-21 16:37:08
您可以计算出您的内容需要多长时间才能使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();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24869545
复制相关文章
相似问题
腾讯云开发者
