如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
当前回答
isHidden = function(element){
return (element.style.display === "none");
};
if(isHidden($("element")) == true){
// Something
}
其他回答
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
api 文档: 可见选择器
有两种方法可以检查元素的可见度。
解决办法1
if($('.selector').is(':visible')){
// element is visible
}else{
// element is hidden
}
解决办法2
if($('.selector:visible')){
// element is visible
}else{
// element is hidden
}
隐藏 () 、 显示 () 和 tgggle () 将 cs (display: noone 或 显示: block) 附加到元素中。 同样, 我们也可以很容易地使用长期操作器检查显示 cs 来检查该元素是否隐藏或可见 。
更新内容 :
您还需要检查元素 css 设置为可见度: “ 可见” 或可见度: “ 隐藏” 如果显示属性设置为内嵌区块、 区块、 弹性, 该元素也将可见 。
这样我们就可以检查一个元素的属性, 使得它隐形。 所以它们会显示: 没有和可见度 : “ 隐藏 ” ;
我们可以创建一个用于检查隐藏元素的属性对象 :
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
我们可以通过绕行检查对象匹配中的每个关键值, 如果密钥的元素属性与隐藏的属性值匹配 。
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
如果您想要检查像元素高度: 0 或宽度: 0 或以上这样的属性, 您可以扩展此对象, 并添加更多属性, 并且可以检查 。
而不是为每个元素写入事件, 请这样做 :
$('div').each(function(){
if($(this).css('display') === 'none'){
$(this).css({'display':'block'});
}
});
您也可以在以下输入中使用:
$('input').each(function(){
if($(this).attr('type') === 'hidden'){
$(this).attr('type', 'text');
}
});
您可以尝试这个
$(document).ready(function() {
var view = $(this).is(':visible');
if(view) {
alert("view");
// Code
}
else
{
alert("hidden");
}
});