如何将 css 应用于溢出：隐藏元素？答案

【问题标题】：How to apply css to overflow:hidden elements?如何将 css 应用于溢出：隐藏元素？
【发布时间】：2017-11-06 17:09:38
【问题描述】：

在这里我想对那些不可见的 div 应用一些 css，因为如果它的高度。所以我想动态应用一些这里没有显示的css（sanjana，giri，santhosh divs）

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

【问题讨论】：

不明白你的意思
你的问题不清楚
在您的示例中，所有 div 都是可见的。你能澄清一下吗？
您的所有 div 都在您的示例代码中可见
这里我提到了 8 个名字，但是这里只有 5 个名字可见，所以在这里我想将一些 css 应用到这里不可见的名字

标签： javascript jquery css

【解决方案1】：

如果它是内联定义的，你可以使用这个：

[style*="overflow:hidden;"],[style*="overflow: hidden;"]

它的作用是寻找任何类型的标签，
具有样式属性集
并且该样式属性包含：overflow:hidden; 或 overflow: hidden;

然后应用相关样式。

var value = 'initial';
var old = 'hidden';
function toggle() {
    $('div[style]').css({'overflow':value});
    var tmp = value;
    value = old;
    old = tmp;
}

[style*="overflow:hidden;"],[style*="overflow: hidden;"] {
    color:white;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="toggle()" value="toggle values">
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

现在如果你只想对不可见的 div 做一些事情，你需要使用 javascript，你可以使用边界框来测试是否可见：

另见How to check if an element is overlapping other elements?

$('[style*="overflow:hidden"],[style*="overflow: hidden;"]').children().each(function(index, element) {
   var $el = $(element);
   var $parent = $el.parent();
   
   // get the bounding boxes.
   var rect1 = $parent.get(0).getBoundingClientRect();
   var rect2 = element.getBoundingClientRect();
   
   // check for overlap(if it's visible)
   if(!(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)) {
                
      $el.removeClass('hidden');
   }
   else {
      // it's hidden!
      console.log('found hidden div '+$el.text());
      $el.addClass("hidden");
   }
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

【讨论】：

不错...！你能看看我的问题stackoverflow.com/questions/47130582/…
你可以在那里自己做。只需将包装器 div 设置为 rect1，然后遍历所有 $('div.slot') 并将它们的边界框与包装器 div 的一个进行比较。
@Tschakkacka 试过但没有得到预期的结果..你能帮我吗

【解决方案2】：

您可以通过 javascript 检查包装器的高度，然后为包装器内不完全可见的所有元素添加一个类。在包装器中添加了一个类 wrap 以使其更加明显。

var wrap = document.querySelector('.wrap');
var wrapHeight = wrap.offsetHeight; // just in case it's not known and set by CSS

wrap.querySelectorAll('div').forEach(function(element){
    var elementBottomPosition = element.offsetTop + element.offsetHeight;
    if(elementBottomPosition >= wrapHeight) {
        element.classList.add('some-class');
    }
});

.wrap {
    height:100px;
    overflow:hidden;
    background:red;
    border:2px dashed #000;
}

.some-class {
    color: lime;
}

<div class="wrap">
  <div>Ganesh</div>
  <div>Om shankar</div>
  <div>Sai</div>
  <div>venkat</div>
  <div>Sireesha</div>
  <div>Sanjana</div>
  <div>Giri</div>
  <div>Santhosh</div>
</div>

【讨论】：

我喜欢这个，漂亮优雅，而且没有 jQuery。