Làm cách nào để kiểm tra xem một phần tử có bị ẩn trong jQuery không?

Là nó có thể để chuyển tầm nhìn của một phần tử, sử dụng các chức năng .hide(), .show()hoặc .toggle()?

Làm thế nào bạn sẽ kiểm tra nếu một yếu tố là visiblehoặc hidden?

Vì câu hỏi đề cập đến một yếu tố duy nhất, mã này có thể phù hợp hơn:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

Nó giống như đề xuất của twernt , nhưng được áp dụng cho một yếu tố duy nhất; và nó phù hợp với thuật toán được đề xuất trong Câu hỏi thường gặp về jQuery .

Chúng tôi sử dụng jQuery là () để kiểm tra phần tử được chọn với một phần tử khác, bộ chọn hoặc bất kỳ đối tượng jQuery nào. Phương thức này di chuyển dọc theo các phần tử DOM để tìm một kết quả khớp, thỏa mãn tham số đã truyền. Nó sẽ trả về true nếu có một trận đấu, nếu không thì trả về false.

Bạn có thể sử dụng hiddenbộ chọn:

// Matches all elements that are hidden
$('element:hidden')

Và visiblebộ chọn:

// Matches all elements that are visible
$('element:visible')

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

Phương pháp trên không xem xét khả năng hiển thị của cha mẹ. Để xem xét cha mẹ là tốt, bạn nên sử dụng .is(":hidden")hoặc .is(":visible").

Ví dụ,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

Phương pháp trên sẽ xem xét div2có thể nhìn thấy trong khi :visiblekhông. Nhưng những điều trên có thể hữu ích trong nhiều trường hợp, đặc biệt là khi bạn cần tìm xem có lỗi div nào hiển thị trong phần cha mẹ ẩn không vì trong các điều kiện như vậy :visiblesẽ không hoạt động.

Không có câu trả lời nào trong số này giải quyết những gì tôi hiểu là câu hỏi, đó là điều tôi đang tìm kiếm, "Làm thế nào để tôi xử lý các mục có visibility: hidden?" . Cả hai :visiblecũng :hiddensẽ không xử lý việc này, vì cả hai đều đang tìm kiếm hiển thị cho mỗi tài liệu. Theo như tôi có thể xác định, không có bộ chọn để xử lý khả năng hiển thị CSS. Đây là cách tôi giải quyết nó (bộ chọn jQuery tiêu chuẩn, có thể có một cú pháp cô đọng hơn):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

Từ Làm cách nào để xác định trạng thái của phần tử được bật?

Bạn có thể xác định xem một phần tử có được thu gọn hay không bằng cách sử dụng :visiblevà :hiddenbộ chọn.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Nếu bạn chỉ đơn giản hành động trên một yếu tố dựa trên khả năng hiển thị của nó, bạn chỉ có thể bao gồm :visiblehoặc :hiddentrong biểu thức bộ chọn. Ví dụ:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Thông thường khi kiểm tra xem một cái gì đó có thể nhìn thấy hay không, bạn sẽ đi ngay lập tức và làm một cái gì đó khác với nó. jQuery chuỗi làm cho điều này dễ dàng.

Vì vậy, nếu bạn có một bộ chọn và bạn chỉ muốn thực hiện một số hành động trên nó nếu có thể nhìn thấy hoặc ẩn đi, bạn có thể sử dụng filter(":visible")hoặc filter(":hidden")theo sau bằng cách xâu chuỗi nó với hành động bạn muốn thực hiện.

Vì vậy, thay vì một iftuyên bố, như thế này:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Hoặc hiệu quả hơn, nhưng thậm chí xấu hơn:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Bạn có thể làm tất cả trong một dòng:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

Bộ :visiblechọn theo tài liệu jQuery :

• Chúng có displaygiá trị CSS là none.
• Chúng là các yếu tố hình thức với type="hidden".
• Chiều rộng và chiều cao của chúng được đặt rõ ràng là 0.
• Một phần tử tổ tiên bị ẩn, vì vậy phần tử không được hiển thị trên trang.

Các yếu tố có visibility: hiddenhoặc opacity: 0được coi là có thể nhìn thấy, vì chúng vẫn tiêu tốn không gian trong bố cục.

Điều này hữu ích trong một số trường hợp và vô dụng trong những trường hợp khác, bởi vì nếu bạn muốn kiểm tra xem phần tử có nhìn thấy được không ( display != none), bỏ qua khả năng hiển thị của cha mẹ, bạn sẽ thấy rằng việc làm .css("display") == 'none'không chỉ nhanh hơn mà còn trả về kiểm tra khả năng hiển thị một cách chính xác.

Nếu bạn muốn kiểm tra mức độ hiển thị thay vì hiển thị, bạn nên sử dụng : .css("visibility") == "hidden".

Cũng xem xét các ghi chú jQuery bổ sung :

Do :visiblelà phần mở rộng của jQuery và không phải là một phần của đặc tả CSS, nên các truy vấn sử dụng :visiblekhông thể tận dụng hiệu suất tăng hiệu suất được cung cấp bởi querySelectorAll()phương thức DOM gốc . Để đạt được hiệu suất tốt nhất khi sử dụng :visibleđể chọn các thành phần, trước tiên hãy chọn các thành phần bằng bộ chọn CSS thuần, sau đó sử dụng .filter(":visible").

Ngoài ra, nếu bạn lo lắng về hiệu suất, bạn nên kiểm tra Bây giờ bạn thấy tôi Hiển thị / ẩn hiệu suất (2010-05-04). Và sử dụng các phương pháp khác để hiển thị và ẩn các yếu tố.

Điều này làm việc cho tôi, và tôi đang sử dụng show()và hide()để làm cho div của tôi bị ẩn / hiển thị:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Khả năng hiển thị phần tử và jQuery hoạt động như thế nào ;

Một yếu tố có thể được ẩn với display:none, visibility:hiddenhoặc opacity:0. Sự khác biệt giữa các phương thức đó:

• display:none ẩn phần tử và nó không chiếm bất kỳ khoảng trống nào;
• visibility:hidden ẩn phần tử, nhưng nó vẫn chiếm không gian trong bố cục;

• opacity:0ẩn phần tử là "mức độ hiển thị: ẩn" và nó vẫn chiếm không gian trong bố cục; sự khác biệt duy nhất là độ mờ cho phép người ta làm cho một phần tử trong suốt;

  if ($('.target').is(':hidden')) {
    $('.target').show();
  } else {
    $('.target').hide();
  }
  if ($('.target').is(':visible')) {
    $('.target').hide();
  } else {
    $('.target').show();
  }
  
  if ($('.target-visibility').css('visibility') == 'hidden') {
    $('.target-visibility').css({
      visibility: "visible",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      visibility: "hidden",
      display: ""
    });
  }
  
  if ($('.target-visibility').css('opacity') == "0") {
    $('.target-visibility').css({
      opacity: "1",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      opacity: "0",
      display: ""
    });
  }

  Các phương thức chuyển đổi jQuery hữu ích:

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });

Bạn cũng có thể làm điều này bằng cách sử dụng JavaScript đơn giản:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Ghi chú:

1. Hoạt động ở mọi nơi

2. Hoạt động cho các yếu tố lồng nhau

3. Hoạt động cho CSS và kiểu nội tuyến

4. Không yêu cầu khung

Tôi sẽ sử dụng lớp CSS .hide { display: none!important; }.

Để ẩn / hiển thị, tôi gọi .addClass("hide")/.removeClass("hide"). Để kiểm tra khả năng hiển thị, tôi sử dụng .hasClass("hide").

Đó là một cách đơn giản và rõ ràng để kiểm tra / ẩn / hiển thị các yếu tố, nếu bạn không có kế hoạch sử dụng .toggle()hoặc .animate()phương pháp.

Liên kết demo

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Nguồn:

Blogger Plug n Play - Các công cụ và tiện ích jQuery: Cách xem phần tử bị ẩn hoặc hiển thị bằng jQuery

Người ta có thể chỉ cần sử dụng thuộc tính hiddenhoặc visible, như:

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

Hoặc bạn có thể đơn giản hóa việc cùng với là như sau.

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

ebdivnên được đặt thành style="display:none;". Nó hoạt động cho cả chương trình và ẩn:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

Một câu trả lời khác bạn nên cân nhắc là nếu bạn đang ẩn một phần tử, bạn nên sử dụng jQuery , nhưng thay vì thực sự ẩn nó, bạn xóa toàn bộ phần tử, nhưng bạn sao chép nội dung HTML của nó và chính thẻ vào một biến jQuery, và sau đó tất cả những gì bạn cần làm là kiểm tra nếu có một thẻ như vậy trên màn hình, sử dụng bình thường if (!$('#thetagname').length).

Khi kiểm tra một phần tử chống lại :hiddenbộ chọn trong jQuery, cần xem xét rằng một phần tử được định vị tuyệt đối có thể được nhận dạng là ẩn mặc dù các phần tử con của chúng có thể nhìn thấy được .

Điều này có vẻ hơi phản trực quan ngay từ đầu - mặc dù việc xem xét kỹ hơn tài liệu jQuery cung cấp thông tin liên quan:

Các yếu tố có thể được coi là ẩn vì một số lý do: [...] Chiều rộng và chiều cao của chúng được đặt rõ ràng thành 0. [...]

Vì vậy, điều này thực sự có ý nghĩa liên quan đến mô hình hộp và kiểu tính toán cho phần tử. Ngay cả khi chiều rộng và chiều cao không được đặt rõ ràng thành 0, chúng vẫn có thể được đặt hoàn toàn .

Hãy xem ví dụ sau:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

Cập nhật cho jQuery 3.x:

Với jQuery 3, hành vi được mô tả sẽ thay đổi! Các yếu tố sẽ được xem là có thể nhìn thấy nếu chúng có bất kỳ hộp bố trí nào, bao gồm cả các ô có chiều rộng và / hoặc chiều cao bằng không.

JSFiddle với jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Mã JavaScript tương tự sau đó sẽ có đầu ra này:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

Điều này có thể làm việc:

expect($("#message_div").css("display")).toBe("none");

Thí dụ:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

Để kiểm tra nếu nó không hiển thị, tôi sử dụng !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

Hoặc sau đây cũng là sam, lưu bộ chọn jQuery vào một biến để có hiệu suất tốt hơn khi bạn cần nó nhiều lần:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

Sử dụng lớp bật tắt, không chỉnh sửa kiểu. . .

Sử dụng các lớp được chỉ định cho các phần tử "ẩn" là dễ dàng và cũng là một trong những phương pháp hiệu quả nhất. Chuyển đổi một lớp 'ẩn' với Displaykiểu 'không' sẽ thực hiện nhanh hơn so với chỉnh sửa trực tiếp kiểu đó. Tôi đã giải thích một số điều này khá kỹ lưỡng trong câu hỏi Stack Overflow Biến hai phần tử hiển thị / ẩn trong cùng một div .

Thực tiễn tốt nhất và tối ưu hóa JavaScript

Dưới đây là một video thực sự khai sáng về Google Tech Talk của kỹ sư mặt trận Google Nicholas Zakas:

• Tăng tốc Javascript của bạn (YouTube)

Ví dụ về việc sử dụng kiểm tra hiển thị cho trình chặn quảng cáo được kích hoạt:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" là một ID mà trình chặn quảng cáo chặn. Vì vậy, kiểm tra nó nếu nó hiển thị, bạn có thể phát hiện nếu trình chặn quảng cáo được bật.

Rốt cuộc, không có ví dụ nào phù hợp với tôi, vì vậy tôi đã tự viết.

Các thử nghiệm (không hỗ trợ Internet Explorer filter:alpha):

a) Kiểm tra xem tài liệu không bị ẩn

b) Kiểm tra xem một phần tử có độ rộng / chiều cao / độ mờ bằng 0 hoặc display:none/ visibility:hiddentrong kiểu nội tuyến không

c) Kiểm tra xem trung tâm (cũng vì nó nhanh hơn kiểm tra mọi pixel / góc) của phần tử không bị ẩn bởi phần tử khác (và tất cả tổ tiên, ví dụ: overflow:hidden/ scroll / một phần tử trên phần tử khác) hoặc cạnh màn hình

d) Kiểm tra xem một phần tử có độ rộng / chiều cao / độ mờ hoặc display:none/ mức độ hiển thị bằng không: ẩn trong các kiểu được tính toán (trong số tất cả các tổ tiên)

Đã thử nghiệm trên

Android 4.4 (Trình duyệt gốc / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (chế độ tài liệu Internet Explorer 5-11 + Internet Explorer 8 trên một máy ảo) và Safari (Windows / Mac / iOS).

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Cách sử dụng:

is_visible(elem) // boolean

Bạn cần kiểm tra cả ... Hiển thị cũng như khả năng hiển thị:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Nếu chúng tôi kiểm tra $(this).is(":visible"), jQuery sẽ tự động kiểm tra cả hai thứ.

Có lẽ bạn có thể làm một cái gì đó như thế này

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

Chỉ cần kiểm tra mức độ hiển thị bằng cách kiểm tra giá trị boolean, như:

if (this.hidden === false) {
    // Your code
}

Tôi đã sử dụng mã này cho từng chức năng. Nếu không, bạn có thể sử dụng is(':visible')để kiểm tra khả năng hiển thị của một yếu tố.

Bởi vì Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(như được mô tả cho jQuery: Selector hiển thị ) - chúng ta có thể kiểm tra xem phần tử có thực sự hiển thị theo cách này hay không:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

Nhưng nếu CSS của phần tử giống như sau thì sao?

.element{
    position: absolute;left:-9999;    
}

Vì vậy, câu trả lời này cho câu hỏi Stack Overflow Làm thế nào để kiểm tra nếu một phần tử nằm ngoài màn hình cũng nên được xem xét.

Một chức năng có thể được tạo để kiểm tra các thuộc tính hiển thị / hiển thị để đánh giá xem phần tử đó có được hiển thị trong UI hay không.

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

Fiddle làm việc

Ngoài ra đây là một biểu thức điều kiện thứ ba để kiểm tra trạng thái của phần tử và sau đó chuyển đổi nó:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}