Question

想象一下，我们有一个带 overflow：hidden 样式的容器div。

如果它现在实际隐藏了什么，我们如何检查？

Answer 1

如果检查子元素高度，

.height()将会执行：

if($('#container').height() < $('#container > div').height()){
  $('pre').html($('#container').height()+"<----container|children--->" +$('#container > div').height());
}

#container{height:50px; background:red; overflow:hidden;}
#container div{height:200px; width:100px; background:black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <div></div>
</div>
<pre></pre>

由于文本溢出，

scrollHeight可用于检查scrollHeight。

在评论中，这只会检查在子元素上没有设置高度时将无法使用的高度，正如您应检查scrollHeight的评论中所建议的那样可以返回给您的高度内部内容是否溢出。

所以我认为这应该是正确的方法：

if($('#container').height() < $('#container')[0].scrollHeight){
  $('pre').html($('#container').height()+"<----.height()|.scrollHeight--->" +$('#container')[0].scrollHeight);
}

#container{height:50px; background:red; overflow:hidden;}
#container div{height:200px; width:100px; background:black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p><p>dummy text</p>
</div>
<pre></pre>

Answer 2

您可以将height元素与其scrollHeight属性进行比较，将width与其scrollWidth属性进行比较：

＆＃13;

var $divs = $('div').filter(function(){
    return  $(this).css('overflow') === "hidden";
});

$divs.toggleClass('overflowed', function(){
    return $(this).height() < $(this).prop('scrollHeight') || $(this).width() < $(this).prop('scrollWidth');
});

＆＃13;

div {
    height: 30px;
    overflow: hidden;
}
.overflowed {
    background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>tteterre
    er<br><br><br><br>
    <br><br><br>
        
    erz
    r
    </div>

＆＃13;

现在您可以创建自己的伪选择器：

＆＃13;

$.extend($.expr[":"], {
  overflowed: $.expr.createPseudo ? $.expr.createPseudo(function() {
      return function(el) {
        return getComputedStyle(el).overflow === "hidden" && (el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
      };
    }) :
    // support: jQuery <1.8
    function(el) {
      return getComputedStyle(el).overflow === "hidden" && (el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
    }
});

$('div:overflowed').addClass('isOverflowed');

＆＃13;

div {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 2em;
  overflow: hidden;
}
div > span {
  position: absolute;
  left: 400px;
  display: block;
}
.isOverflowed {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>doesn't overflow</div>
<div>there is little content overflowing by height</div>
<div>content element oveflowing <span>GET IT</span></div>

＆＃13;

Answer 3

您可以将元素的clientHeight与其scrollHeight进行比较：

var container = $('.container')[0];
var hasOverflowed = container.scrollWidth > container.clientWidth || container.scrollHeight > container.clientHeight;

Example fiddle

您也可以轻松地将其转换为自己的jQuery方法：

$.fn.hasOverflowed = function() {
    var el = this[0];
    return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
}

if ($('#myElement').hasOverflowed()) {
    // Run to the hills!
}

Example fiddle

Answer 4

尝试以下

SELECT      id,
            mgr_id,
            sal,
            Max_sal
FROM        #your_table A
CROSS APPLY (SELECT Max(SAL) AS Max_sal
             FROM   #your_table B
             WHERE  B.mgr_id = A.mgr_id)cs

如果容器可见，则上面的代码返回true，否则返回false

Answer 5

如果要检查父元素中的子元素，则需要比较维度以查看子元素是否大于父元素。

var parentWidth = $('.parent').width();
var parentHeight = $('.parent').height();
var childWidth = $('.child').width();
var childHeight = $('.child').height();

if(childWidth > parentWidth || childHeight > parentHeight){
   //something is hidden
};

我不确定的是.height()和.width()是否会抓住孩子的真实身高和宽度，或者仅仅是父母提供的边界。

如果这只是div内的文字，我不知道如何检查。

如何检查容器div是否隐藏了什么？

5 个答案: