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

如果一个元素是visiblehidden?


当前回答

我找了这个, 没有一个答案是正确的 我的案子是正确的, 所以我创造了一个功能, 返回假的,如果一个人的眼睛看不到元素

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});

其他回答

1 支查解决办法

确定元素在 jQuery 中是否可见的方法

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

全部环圈可见可见div id 'maylement' 元素的孩子:

$("#myelement div:visible").each( function() {
 //Do something
});

在jQuery的源头钻探

这就是jQuery如何执行这个功能:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • 如何检查元素是否在屏幕外 - CSS

使用元素. getBoundingClientRect () 您可以很容易地检测到您的元素是否在您视图的边界之内( 屏幕上或屏幕下) :

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

然后,你可以以几种方式使用:

// Returns all elements that are offscreen
$(':offscreen');

// Boolean returned if element is offscreen
$('div').is(':offscreen');

如果使用角,请检查:不要使用与角的隐藏属性

content.style.display != 'none'

function toggle() {
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.log('visible:', visible);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>

你可以试试这个

$(document).ready(function() {
   var view = $(this).is(':visible');

   if(view) {
      alert("view");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
if($("h1").is(":hidden")){
    // your code..
}

您可以在显示时添加一个类。添加一个类,show。然后检查它有一个类:

$('#elementId').hasClass('show');

如果有的话它返回为真show类。

添加像这样的 CSS :

.show{ display: block; }