如何用javascript判断div是否发生了溢出

Question

网页上有一个div（id="info"）元素，它的宽和高是固定的，css如下：

div#info 

{

    width: 10cm;

    height: 8cm;

    border-style: solid;

    border-width: 1pt;

    border-color: orange;

    overflow: auto;

}

它里面包含若干个div（或其它的块级元素）这些是通过AJAX动态获取的，所以也不知道高度是多少,如果过多或过大都会导致info的溢出。所以info的overflow样式设置为了auto，这样在内容溢出的时候就会出现滚动条。

我的问题是：

能否用javascript判断这个info是否发生了溢出？

或者这样也可以：用javascript判断info是否已经出现了滚动条？

（解释一下这样做的目的，AJAX会不停的从服务器拉取信息，但每次得到的条目长短可能有很大差异，所以不知道显示到第几条时info会溢出。如果info溢出了，程序就会适当删除旧的条目，否则就会继续在info里堆积）

Answer 1

可以用元素的scrollHeight属性和clientHeight属性来判断, 当scrollHeight大于clientHeight的时候，元素就是可以垂直滚动的；如果检测水平滚动的话，可以用scrollWidth和clientWidthvar element = document.getElementById('element');if (element.scrollHeight > element.clientHeight) {    ...}关于scrollHeight和clientHeight可以看看MDN的介绍:scrollHeightclientHeight