如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
当前回答
只需检查该元素是否可见, 并返回一个布尔。 jquery 通过在元素中添加无显示来隐藏元素, 所以如果您想要使用纯正的 javascript, 您仍然可以这样做, 例如 :
if (document.getElementById("element").style.display === 'block') {
// Your element is visible; do whatever you'd like
}
您也可以使用jquery, 因为您的代码的其余部分似乎使用这个代码, 而您有小块代码。 类似在jquery的下面的东西, 也为您玩同样的把戏:
if ($(element).is(":visible")) {
// Your element is visible, do whatever you'd like
};
使用 cs 方法在 jquery 中也可以产生同样的结果 :
if ($(element).css('display') === 'block') {
// Your element is visible, do whatever you'd like
}
在检查能见度和显示情况时,您还可以做以下工作:
if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
// Your element is visible, do whatever you'd like
}
其他回答
由于问题只涉及一个要素,本守则可能更适合:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
它与twern的建议相同,但适用于一个单一要素;它与jquery faq中推荐的算法相符。
我们用 jquery's is () 来检查选中元素与其它元素、 选择器或任何 jquery 对象的对比。 此方法沿 dom 元素绕行查找匹配, 满足已传递参数 。 如果匹配, 返回为真, 否则返回为假 。
下面的代码检查,如果元素隐藏在jquery或可见
// You can also do this...
$("button").click(function(){
// show hide paragraph on button click
$("p").toggle("slow", function(){
// check paragraph once toggle effect is completed
if($("p").is(":visible")){
alert("The paragraph is visible.");
} else{
alert("The paragraph is hidden.");
}
});
});
if($("h1").is(":hidden")){
// your code..
}
隐藏 () 、 显示 () 和 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');
}
});