如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visiblehidden?


当前回答

这个问题最简单的答案是:

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

其他回答

expect($("#message_div").css("display")).toBe("none");
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

我会用CSS课.hide { display: none!important; }.

躲藏/展示,我打电话.addClass("hide")/.removeClass("hide")为了检查能见度,我使用.hasClass("hide").

这是一个简单清晰的检查/隐藏/显示元素的方法, 如果你不计划使用.toggle().animate()方法。

原为:hide(), show()toggle()内嵌 cs (display:none 或 显示: block) 到元素。 同样, 我们也可以很容易地使用永久运算符来检查元素是否隐藏或可见, 检查显示 CSS 。

更新:

  • 您还需要检查元素 CSS 设置为可见度: “ 可见” 或“ 隐蔽” 。
  • 如果显示属性被设置为内嵌区块、区块、弹性,则该元素也将是可见的。

这样我们就可以检查一个元素的属性, 使得它隐形。 所以它们是display: nonevisibility: "hidden";

我们可以创建一个用于检查对隐藏元素负责的财产的物件:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

我们可以通过在对象匹配中环绕每个关键值来检查密钥的元素属性是否与隐藏的属性值匹配 。

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

如果您想要检查像元素高度: 0 或宽度: 0 或以上这样的属性, 您可以扩展此对象, 并添加更多属性, 并且可以检查 。

人们可以简单地使用hiddenvisible属性, 如 :

$('element:hidden')
$('element:visible')

或者您可以简化相同的如下所示。

$(element).is(":visible")