想象一下,我们有一个带 overflow:hidden 样式的容器div。
如果它现在实际隐藏了什么,我们如何检查?
答案 0 :(得分:4)
.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>
答案 1 :(得分:2)
您可以将height
元素与其scrollHeight
属性进行比较,将width
与其scrollWidth
属性进行比较:
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;
现在您可以创建自己的伪选择器:
$.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;
答案 2 :(得分:2)
您可以将元素的clientHeight
与其scrollHeight
进行比较:
var container = $('.container')[0];
var hasOverflowed = container.scrollWidth > container.clientWidth || container.scrollHeight > container.clientHeight;
您也可以轻松地将其转换为自己的jQuery方法:
$.fn.hasOverflowed = function() {
var el = this[0];
return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
}
if ($('#myElement').hasOverflowed()) {
// Run to the hills!
}
答案 3 :(得分:0)
尝试以下
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
答案 4 :(得分:0)
如果要检查父元素中的子元素,则需要比较维度以查看子元素是否大于父元素。
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内的文字,我不知道如何检查。