当前位置：文江博客话题详情

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

发布于 2024-11-24 11:47:36 字数 122 浏览 0 评论 0原文

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

我知道我应该检查 clientHeight

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

记忆消瘦 2024-12-01 11:47:36

使用 jquery：

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

编辑 @JoJo 向我解释了我从你的描述中错过的内容。因此，只需将内部包装器放入 .cal div 中，然后获取包装器的高度和宽度即可。如果内部包装器大于您的 .cal 那么该块就会溢出。 jsfiddle 上的概念证明

Using jquery:

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

EDIT @JoJo explained me what I’ve missed from your description. So just put an inner wrapper into your .cal div and get height and width of the wrapper instead. If inner wrapper is larger than your .cal then the block is overflown. Proof of concept on jsfiddle

回复收藏 0 原文

此生挚爱伱 2024-12-01 11:47:36

我不了解 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');
  }
 }
);

I don't know jQuery, so here is the Prototype solution. I'm sure it's easy to convert to jQuery. The idea is to check the full height of the contents. If it exceeds the clipped height, then it is considered overflown. We add a "overflowError" class in this case. Perhaps this class will reveal the "show more" button via CSS.

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

回复收藏 0 原文

~没有更多了~