it-swarm-vi.com

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

Có thể chuyển đổi mức độ hiển thị của một phần tử, bằng cách sử dụng các hàm .hide(), .show() hoặc .toggle().

Làm thế nào bạn sẽ kiểm tra nếu một yếu tố được nhìn thấy hoặc ẩn?

7074
Philip Morton

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 for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

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

Tương tự như gợi ý của twernt , nhưng được áp dụng cho một yếu tố duy nhất; và nó khớp với thuật toán được đề xuất trong jQuery FAQ

8738
Tsvetomir Tsonev

Bạn có thể sử dụng hidden selector:

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

visible bộ chọn:

// Matches all elements that are visible
$('element:visible')
1339
twernt
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 cả phụ huynh, 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 div2 hiển thị trong khi :visible thì khô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 điều kiện như vậy :visible sẽ không hoạt động.

850
Mote

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 cách nào để xử lý các mục có visibility: hidden?" . Cả :visible:hidden đều không xử lý việc này, vì cả hai đều đang tìm kiếm hiển thị trên 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ó cú pháp cô đọng hơn):

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

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 các bộ chọn :visible:hidden.

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 :visible hoặc :hidden trong biểu thức chọn. Ví dụ:

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

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 bị ẩn, bạn có thể sử dụng filter(":visible") hoặc filter(":hidden") theo sau là 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 câu lệnh if, 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" });
259
Simon_Weaver

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

  • Chúng có giá trị CSS displaynone.
  • Chúng là các thành phần 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 phần tử có visibility: hidden hoặc opacity: 0 được coi là hiển thị, 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ó hiển thị không (display != none), bỏ qua khả năng hiển thị của cha mẹ, bạn sẽ thấy rằng 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ị .

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".

Đồng thời xem xét các ghi chú jQuery bổ sung :

:visible là một 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 :visible không thể tận dụng việc tăng hiệu suất được cung cấp bởi phương thức DOM querySelectorAll() 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ố.

211
Pedro Rainho

Điều này hiệu quả với tôi và tôi đang sử dụng show()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   */
}
188
Abiy

Cách hiển thị phần tử và jQuery hoạt động;

Một phần tử có thể được ẩn bằng display:none, visibility:hidden hoặ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();
    });
    
185
webvitaly

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 mức độ 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 các phương thức .toggle() hoặc .animate().

146
Evgeny Levin

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

141
Matt Brock

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

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

Hoặc bạn có thể đơn giản hóa tương tự vớinhư sau.

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

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="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

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

111
Code Spy

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 HTML content và thẻ tự biến thành một biến jQuery, và sau đó tất cả những gì bạn cần làm là kiểm tra xem có một thẻ như vậy trên màn hình hay không, bằng cách sử dụng if (!$('#thetagname').length) bình thường.

110
think123

ebdiv nê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();
    });    
});
109
Vaishu

Khi kiểm tra một phần tử đối với bộ chọn :hidden 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.

Đ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 ngầm.

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 YÊU CẦU 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 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/

Cùng một JS sẽ có đầu ra này:

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

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

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

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>

63
Irfan DANISH

Để 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')
}
62
Matthias Wegtun

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 kiểu Display của 'none' 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à video thực sự khai sáng về Google Tech Talk của kỹ sư mặt trận Google Nicholas Zakas:

59
Lopsided

Ví dụ về việc sử dụng hiển thị kiểm tra 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 bật trình chặn quảng cáo.

56
Roman Losev

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.

Kiểm tra (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:nonevisibility:hidden theo kiểu nội tuyến

c) Kiểm tra xem trung tâm (cũng bởi vì nó nhanh hơn việc 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ả các tổ tiên, ví dụ: overflow:hidden/scroll/một phần tử trên môi trường)

d) Kiểm tra xem một phần tử có độ rộng/chiều cao/độ mờ bằng không hoặc display:none/mức độ hiển thị: ẩ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áy ảo), 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
55
Aleko

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ứ.

50
Premshankar Tiwari

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>

38
Mathias Stavrou

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 tôi có thể kiểm tra xem phần tử có phải là really 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;
    }
});
32
Andron

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 mức độ hiển thị của một phần tử.

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

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 Cách kiểm tra xem một phần tử có ở ngoài màn hình cũng nên được xem xét.

30
RN Kushwaha

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'); });
29
cssimsek

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'));
}

Làm việc Fiddle

29
V31
.is(":not(':hidden')") /*if shown*/
25
Kareem

Tôi đã tìm kiếm điều này và không có câu trả lời nào đúng cho trường hợp của tôi, vì vậy tôi đã tạo ra một hàm sẽ trả về sai nếu mắt của một người không thể nhìn thấy phần tử

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;
    }
  }  
});
19
lmcDevloper
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
18
Prabhagaran

Đây là cách jQuery giải quyết nội bộ vấn đề này:

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

Nếu bạn không sử dụng jQuery, bạn có thể tận dụng mã này và biến nó thành chức năng của riêng bạn:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

isVisible sẽ trả về true miễn là phần tử được hiển thị.

15
Oriol

Chỉ cần kiểm tra xem phần tử đó có hiển thị và nó sẽ trả về boolean , jQuery ẩn các phần tử bằng cách thêm không hiển thị vào phần tử, vì vậy nếu bạn muốn sử dụng JavaScript thuần, bạn vẫn có thể làm điều đó, ví dụ:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

Ngoài ra, bạn có thể sử dụng jQuery như phần còn lại của mã bằng cách sử dụng mã đó và bạn có khối mã nhỏ hơn, giống như bên dưới trong jQuery, thực hiện cùng một bài hát cho bạn:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

Cũng sử dụng phương thức css trong jQuery có thể dẫn đến điều tương tự:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

Ngoài ra trong trường hợp kiểm tra khả năng hiển thị và hiển thị, bạn có thể thực hiện như sau:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}
14
Alireza

Có khá nhiều cách để kiểm tra xem một phần tử có thể nhìn thấy hoặc ẩn trong jQuery hay không.

Bản demo HTML để tham khảo ví dụ

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Sử dụng Bộ chọn Bộ lọc Hiển thị $('element:hidden') hoặc $('element:visible')

  • $('element:hidden'): Chọn tất cả các yếu tố bị ẩn.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): Chọn tất cả các yếu tố có thể nhìn thấy.

    Example:
       $('#content:visible').css('color', '#EEE');
    

Đọc thêm tại http://api.jquery.com/carget/selector/visibility-filter-selector/

Sử dụng is() Lọc

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Đọc thêm tại http://api.jquery.com/is/

14
Arun Karnawat

Như hide(), show()toggle() đính kèm css nội tuyến (display: none hoặc display: block) với phần tử . Tương tự, chúng ta có thể dễ dàng sử dụng toán tử ternary để kiểm tra phần tử thời tiết bị ẩn hoặc hiển thị bằng cách kiểm tra css hiển thị.

CẬP NHẬT:

  • Bạn cũng cần kiểm tra xem phần tử css được đặt thành khả năng hiển thị: "hiển thị" hay mức độ hiển thị: "ẩn"
  • Phần tử cũng sẽ hiển thị nếu thuộc tính hiển thị được đặt thành khối nội tuyến, khối, flex.

Vì vậy, chúng ta có thể kiểm tra thuộc tính của phần tử làm cho nó vô hình. Vậy chúng là display: nonevisibility: "hidden";

Chúng ta có thể tạo một đối tượng để kiểm tra thuộc tính chịu trách nhiệm ẩn phần tử:

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

Chúng ta có thể kiểm tra bằng cách lặp qua từng giá trị khóa trong đối tượng khớp nếu thuộc tính phần tử cho khóa khớp với giá trị thuộc tính ẩn.

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

Nếu bạn muốn kiểm tra thuộc tính như chiều cao phần tử: 0 hoặc chiều rộng: 0 trở lên, bạn có thể mở rộng đối tượng này và thêm thuộc tính cho nó và có thể kiểm tra.

Cảm ơn bạn @Krzysztof Przygoda đã nhắc nhở tôi các thuộc tính hiển thị khác.

14
No one

Bạn có thể sử dụng điều này:

$(element).is(':visible');

Mã ví dụ

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

13
Abrar Jahin

Đây là một số tùy chọn để kiểm tra xem thẻ có hiển thị hay không

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

11
Sangeet Shah

Tôi chỉ muốn làm rõ rằng, trong jQuery,

Các yếu tố có thể được coi là ẩn vì một số lý do:

  • Chúng có giá trị hiển thị CSS là không có.
  • Chúng là các thành phần 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ó khả năng hiển thị: ẩn hoặc độ mờ: 0 được coi là hiển thị, vì chúng vẫn tiêu tốn không gian trong bố cục. Trong các hình ảnh động ẩn một phần tử, phần tử được coi là hiển thị cho đến khi kết thúc hình ảnh động.

Nguồn: : Bộ chọn ẩn | Tài liệu API jQuery

if($('.element').is(':hidden')) {
  // Do something
}
10
Sky Yip

Bạn chỉ có thể thêm một lớp khi nó hiển thị. Thêm một lớp, show. Sau đó kiểm tra xem nó có một lớp không:

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

Nó trả về true nếu bạn có lớp show.

Thêm CSS như thế này:

.show{ display: block; }
9
Sahan

Có quá nhiều phương pháp để kiểm tra các yếu tố ẩn. Đây là sự lựa chọn tốt nhất (tôi chỉ khuyên bạn):

Sử dụng jQuery, tạo một phần tử, "display: none", trong CSS để ẩn.

Điểm mấu chốt là:

$('element:visible')

Và một ví dụ để sử dụng:

$('element:visible').show();
7
Abdul Aziz Al Basyir

Chỉ cần kiểm tra thuộc tính display (hoặc visibility tùy thuộc vào loại tàng hình bạn thích). Thí dụ :

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
5
Antoine Auffray

Bạn có thể dùng 

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

Tài liệu API: https://api.jquery.com/visible-selector/

4
Wolfack

1 • Giải pháp jQuery

Các phương thức để xác định xem một phần tử có hiển thị trong JQuery không

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

Lặp lại trên tất cả nhìn thấy div con của phần tử id 'myelement':

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

Xem tại nguồn của jQuery

Đây là cách jQuery triển khai tính năng này:

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

2 • Cách kiểm tra xem một phần tử có ở ngoài màn hình hay không - CSS

Sử dụng Element.getBoundingClientRect () bạn có thể dễ dàng phát hiện xem phần tử của bạn có nằm trong giới hạn của chế độ xem của bạn hay không (ví dụ: trên màn hình hoặc ngoài màn hình):

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)
         );
};

Sau đó, bạn có thể sử dụng nó theo nhiều cách:

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

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

Nếu bạn sử dụng Angular, hãy kiểm tra: Don sử dụng thuộc tính ẩn với Angular

3
Lyes CHIOUKH

Nếu bạn muốn kiểm tra xem một phần tử có hiển thị trên trang hay không, tùy thuộc vào mức độ hiển thị của phần tử mẹ, bạn có thể kiểm tra xem widthheight của phần tử có bằng 0.

jQuery

$element.width() === 0 && $element.height() === 0

Vanilla

element.clientWidth === 0 && element.clientHeight === 0

Hoặc là

element.offsetWidth === 0 && element.offsetHeight === 0

3
Profesor08
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

Bạn có thể sử dụng một lớp css khi nó hiển thị hoặc ẩn bằng cách chuyển đổi lớp.

.show{ display :block; }

Đặt jQuery của bạn toggleClass() hoặc addClass() hoặc removeClass();.

Ví dụ

jQuery('#myID').toggleClass('show')

Đoạn mã trên sẽ thêm lớp show css khi phần tử không có show và sẽ xóa khi nó có lớp show.

Và khi bạn kiểm tra xem nó có hiển thị hay không, Bạn có thể làm theo mã jQuery này,

jQuery('#myID').hasClass('show');

Mã ở trên sẽ trả về một boolean (true) khi phần tử #myID có lớp của chúng ta (show) và sai khi nó không có lớp (show).

1
Sahan

Bạn có thể sử dụng hàm jQuery is() để kiểm tra phần tử được chọn hiển thị hoặc ẩn. 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 trả về false.

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
1

Thay vì viết event cho mỗi element, hãy làm điều này:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Ngoài ra, bạn có thể sử dụng nó trên đầu vào:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
0
user10145552

Thử

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>
0
Kamil Kiełczewski

Bạn có thể làm được việc này:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}
0
user8903269

giải pháp jQuery, câu hỏi khá cũ nhưng tôi vẫn không thể trả lời tốt hơn cho những ai muốn thay đổi văn bản nút.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

0
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825

Để công bằng cho câu hỏi trước ngày trả lời này. Tôi thêm nó không chỉ trích OP nhưng để giúp bất cứ ai vẫn hỏi câu hỏi này.

Cách chính xác để xác định xem có thứ gì đó hiển thị hay không là tham khảo mô hình xem của bạn. Nếu bạn không biết điều đó có nghĩa là gì thì bạn sắp bắt đầu một hành trình khám phá sẽ giúp công việc của bạn trở nên khó khăn hơn.

Dưới đây là tổng quan về model-view-viewmodel architecture (MVVM).

KnockoutJS là một thư viện ràng buộc sẽ cho phép bạn thử công cụ này mà không cần học toàn bộ khung.

Và đây là một số JS và DIV có thể hoặc không thể nhìn thấy.

<html><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
  IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
  //get current visibility state for the div
  var x = IsDivVisible();
  //set it to the opposite
  IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body></html>

Lưu ý rằng chức năng chuyển đổi không tham khảo DOM để xác định mức độ hiển thị của div, nó liên quan đến mô hình xem.

0
Peter Wone