Question

我有31个div，同一个类“.cal”。有没有办法检测每个div，如果一个（或许多其他）div有溢出，浏览器会自动添加一个html内容提醒用户这个div是否溢出？

我知道我应该检查一下clientHeight

Answer 1

使用jquery：

$(".cal").each(function(i){
    if ($(this).css("overflow") === "hidden") {
        $(this).html("Overflow");
    }
});

编辑 @JoJo向我解释了我从您的描述中遗漏了什么。所以只需将一个内部包装器放入.cal div中，然后获取包装器的高度和宽度。如果内部包装器大于.cal，则块会溢出。 jsfiddle

上的概念证明

Answer 2

我不知道jQuery，所以这里是原型解决方案。我确信转换为jQuery很容易。我们的想法是检查内容的完整高度。如果它超过了剪切高度，那么它被认为是溢出的。在这种情况下，我们添加了一个“overflowError”类。也许这个课程将通过CSS显示“显示更多”按钮。

$$('.cal').each(
 function(div) {
  div.setStyle({overflow: 'visible'});
  var fullHeight = div.getHeight();
  div.setStyle({overflow: 'hidden'});
  if (div.getHeight() < fullHeight) {
   div.addClassName('overflowError');
  }
 }
);

如何使用JavaScript（和jquery）检测一堆相同div类中的div溢出？

2 个答案: