使用DOM更改特定的样式

我对JavaScript和DOM比较陌生，但对C++有经验。我正在研究几个严重依赖DOM的JavaScript实验，包括响应命令的控制台。整个事情工作正常，除非元素比页面长。控制台工作的方式是使用DOM，它需要一个元素并向内容添加一行。这是一个问题，因为清除它时，我无法定位特定的行，即最上面的一行，只能清除/修改那一行。我已经尝试了我所知道的一切，例如循环，数组，嵌套ifs等，但没有运气。我只想让控制台停止无限延伸，并且要么有滚动条，要么开始清理旧线。这是当前清理机制（相当无用）：使用DOM更改特定的样式

if (extended > 24) 
{ 
    alert("Message Stream full, resetting."); 
    document.getElementById("boxRightSpace").innerHTML = ""; 
    extended = 0; 
}

任何帮助，将不胜感激。谢谢。

来源

2012-11-18 murtaza64

你可以发表一个代表/ [SSCCE]（http：//sscce.o rg /）现场演示在[JS小提琴]（http://jsfiddle.net/），或类似？ –

你可以滚动控制台底部，每次插入新行：

document.getElementById("boxRightSpace").scrollTop = document.getElementById("boxRightSpace").scrollHeight;

控制台-DIV本身必须有一个固定的高度和overflow:auto像这样

#boxRightSpace { 
    overflow: auto; 
    height: 300px; 
    width: 400px; 
}

或者，你可以通过这种方法删除行：

<div id="boxRightSpace"> 
    <div>line1</div> 
    <div>line2</div> 
    <div>line3</div> 
    <div>line4</div> 
    <div>line5</div> 
    <div>line6</div> 
    <div>line7</div> 
    <div>line8</div> 
</div> 

<script> 

    var max_console_items = 5, 
     cons= document.getElementById("boxRightSpace"), 
     console_items = cons.getElementsByTagName("div"); 

    while (console_items.length > max_console_items) 
    { 
     cons.removeChild(console_items[0]); 
    } 
</script>

来源

2012-11-18 18:03:48

谢谢！这非常有帮助！但如果高度可以是动态的，这将是有用的。 – murtaza64

我已更新我的文章，以替代solutin，可能会帮助你更多。 –

你的动态身高是什么意思？你当然可以结合使用这两种方法，也可以使用'overflow：auto'。另外，请看'max-height'。 –

使用DOM更改特定的样式

回答

相关问题