Bagaimana cara saya memeriksa apakah suatu elemen tersembunyi di jQuery?


7746

Apakah mungkin untuk mengaktifkan visibilitas elemen, menggunakan fungsi .hide(), .show()atau .toggle()?

Bagaimana Anda menguji apakah suatu elemen adalah visibleatau hidden?


49
Layak disebutkan (bahkan setelah sekian lama), yang $(element).is(":visible")berfungsi untuk jQuery 1.4.4, tetapi tidak untuk jQuery 1.3.2, di bawah Internet & nbsp; Explorer & nbsp; 8 . Ini dapat diuji menggunakan cuplikan uji Tsvetomir Tsonev yang sangat membantu . Ingatlah untuk mengubah versi jQuery, untuk menguji masing-masing.
Ruben

2
Ini terkait meskipun pertanyaan yang berbeda: stackoverflow.com/questions/17425543/…
Mark Schultheiss

Jawaban:


9402

Karena pertanyaan mengacu pada satu elemen, kode ini mungkin lebih cocok:

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

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

Ini sama dengan saran twernt , tetapi diterapkan pada elemen tunggal; dan itu cocok dengan algoritma yang direkomendasikan di FAQ jQuery .

Kami menggunakan jQuery's is () untuk memeriksa elemen yang dipilih dengan elemen lain, pemilih atau objek jQuery apa pun. Metode ini melintasi sepanjang elemen DOM untuk menemukan kecocokan, yang memenuhi parameter yang diteruskan. Ini akan mengembalikan true jika ada kecocokan, jika tidak return salah.


164
Solusi ini tampaknya akan mendorong kebingungan dari visible=falsedan display:none; sedangkan solusi Mote jelas menggambarkan niat pembuat kode untuk memeriksa display:none; (via penyebutan hide and show yang display:nonetidak mengontrol visible=true)
kralco626

93
Itu benar, tetapi :visiblejuga akan memeriksa apakah elemen induk terlihat, seperti yang ditunjukkan chiborg.
Tsvetomir Tsonev

45
Anda ada benarnya - saya akan menjelaskan bahwa kode hanya memeriksa displayproperti. Mengingat bahwa pertanyaan aslinya adalah untuk show()dan hide(), dan mereka mengatur display, jawaban saya benar. Ngomong-ngomong itu bekerja dengan IE7, berikut ini cuplikan uji - jsfiddle.net/MWZss ;
Tsvetomir Tsonev

53
Saya benar-benar menemukan bahwa kata-kata logika kebalikan lebih baik:! $ ('Selector'). Is (': hidden'); untuk beberapa alasan. Layak dicoba.
Kzqai

21
Berikut ini adalah pengujian benchmark sederhana () terhadap regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Kesimpulan: jika Anda keluar untuk kinerja, gunakan regexp over is () (karena is () mencari semua node tersembunyi terlebih dahulu sebelum melihat elemen yang sebenarnya).
Max Leske

1460

Anda dapat menggunakan hiddenpemilih:

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

Dan visiblepemilih:

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

67
hanya hati-hati, ada beberapa tips terkait kinerja yang baik dalam presentasi ini: addyosmani.com/jqprovenperformance
codecraig

27
Pada halaman 21 hingga 28 ini menunjukkan seberapa lambat: tersembunyi atau: terlihat dibandingkan dengan penyeleksi lainnya. Terima kasih telah menunjukkan ini.
Etienne Dupuis

109
Ketika Anda berurusan dengan beberapa elemen dan sangat sedikit yang terjadi - yaitu THE MAJORITY VAST CASUR OF ABSURDLY - masalah waktu adalah masalah kecil sekali. Oh tidak! Butuh 42 ms bukannya 19 ms !!!
vbullinger

16
Saya mengaktifkan elemen secara maya menggunakan pemilih ini. $ ('element: hidden') selalu benar untuk saya!
ZoomIn

15
@ cwingrav Anda mungkin ingin membaca kembali dokumentasi,: hidden berlaku untuk semua elemen. Bentuk elemen dengan type="hidden"hanyalah satu kasus yang dapat memicu: disembunyikan. Elemen tanpa tinggi dan lebar, elemen dengan display: none, dan elemen dengan leluhur tersembunyi juga akan memenuhi syarat sebagai: tersembunyi.
Joshua Walsh

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

Metode di atas tidak mempertimbangkan visibilitas orang tua. Untuk mempertimbangkan orang tua juga, Anda harus menggunakan .is(":hidden")atau .is(":visible").

Sebagai contoh,

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

Metode di atas akan dianggap div2terlihat sementara :visibletidak. Tetapi hal di atas mungkin berguna dalam banyak kasus, terutama ketika Anda perlu mencari jika ada kesalahan div yang terlihat di induk tersembunyi karena dalam kondisi seperti :visibleitu tidak akan berfungsi.


131
Ini hanya memeriksa properti tampilan elemen tunggal. Atribut: visible memeriksa juga visibilitas elemen induk.
chiborg

16
Ini adalah satu-satunya solusi yang bekerja untuk saya ketika pengujian dengan IE 8.
evanmcd

20
@ Chiborg Ya, tapi kadang-kadang itulah yang Anda inginkan dan saya harus belajar dengan cara yang sulit bagaimana "pintar" jQuery ...
Casey

9
Ini memang menjawab pertanyaan, karena pertanyaannya adalah tentang elemen tunggal dan dengan menggunakan hide(), show()dan toggle()fungsi, namun, seperti yang telah dikatakan sebagian besar, kita harus menggunakan kelas :visibledan :hiddenpseudo-class.
Jimmy Knoot

2
Jawaban ini dapat digunakan ketika elemen ada tetapi saat ini tidak ada di halaman, seperti setelah lepas ().
atheaos

526

Tidak satu pun dari jawaban ini yang menjawab apa yang saya pahami sebagai pertanyaan, yang merupakan apa yang saya cari, "Bagaimana saya menangani barang yang dimiliki visibility: hidden?" . Tidak :visiblejuga tidak :hiddenakan menangani ini, karena keduanya mencari tampilan per dokumentasi. Sejauh yang saya bisa menentukan, tidak ada pemilih untuk menangani visibilitas CSS. Inilah cara saya mengatasinya (pemilih jQuery standar, mungkin ada sintaks yang lebih kental):

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

18
Jawaban ini baik untuk ditangani visibilitysecara harfiah, tetapi pertanyaannya adalah How you would test if an element has been hidden or shown using jQuery?. Menggunakan jQuery berarti: displayproperti.
MarioDS

10
Elemen dengan visibility: hiddenatau opacity: 0dianggap terlihat, karena masih mengkonsumsi ruang dalam tata letak. Lihat jawaban oleh Pedro Rainho dan dokumentasi jQuery pada :visiblepemilih.
awe

9
Anda perlu melintasi DOM untuk memeriksa orang tua node, atau yang lain, ini tidak berguna.
vsync

390

Dari Bagaimana cara saya menentukan keadaan elemen toggled?


Anda dapat menentukan apakah suatu elemen diciutkan atau tidak dengan menggunakan :visibledan :hiddenpenyeleksi.

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

Jika Anda hanya bertindak berdasarkan elemen berdasarkan visibilitasnya, Anda bisa memasukkan :visibleatau :hiddendalam ekspresi pemilih. Sebagai contoh:

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

4
bertanya-tanya mengapa tidak ada jawaban yang menyebutkan kasus ketika elemen dipindahkan dari jendela yang terlihat, seperti top:-1000px... Tebak itu kasus tepi
jazzcat

295

Seringkali ketika memeriksa apakah sesuatu terlihat atau tidak, Anda akan langsung pergi dan melakukan sesuatu yang lain dengannya. Chaining jQuery memudahkan ini.

Jadi jika Anda memiliki pemilih dan Anda ingin melakukan beberapa tindakan di atasnya hanya jika terlihat atau disembunyikan, Anda dapat menggunakan filter(":visible")ataufilter(":hidden") diikuti dengan merantai dengan tindakan yang ingin Anda ambil.

Jadi alih-alih ifpernyataan, seperti ini:

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

Atau lebih efisien, tetapi bahkan lebih jelek:

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

Anda dapat melakukan semuanya dalam satu baris:

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

25
Tidak ada alasan untuk mengekstrak simpul DOM dalam cuplikan yang digunakan dalam contoh, dan kemudian harus mencarinya kembali. Lebih baik lakukan saja: var $ button = $ ('# btnUpdate'); Dan kemudian di ekspresi Jika hanya menggunakan tombol $ bukan $ (tombol). Memiliki keuntungan dari caching objek jQuery.
LocalPCGuy

1
ini adalah contoh sederhana jquerypot.com/...
Ketan Savaliya

242

The :visiblepemilih menurut dokumentasi jQuery :

  • Mereka memiliki displaynilai CSSnone .
  • Mereka adalah elemen bentuk dengan type="hidden" .
  • Lebar dan tinggi mereka secara eksplisit diatur ke 0.
  • Elemen leluhur disembunyikan, sehingga elemen tidak ditampilkan di halaman.

Elemen dengan visibility: hiddenatau opacity: 0dianggap terlihat, karena masih mengkonsumsi ruang dalam tata letak.

Ini berguna dalam beberapa kasus dan tidak berguna dalam yang lain, karena jika Anda ingin memeriksa apakah elemen terlihat ( display != none), mengabaikan visibilitas orang tua, Anda akan menemukan bahwa melakukan.css("display") == 'none' tidak hanya lebih cepat, tetapi juga akan mengembalikan pemeriksaan visibilitas dengan benar.

Jika Anda ingin memeriksa visibilitas alih-alih tampilan, Anda harus menggunakan: .css("visibility") == "hidden" .

Juga pertimbangkan catatan jQuery tambahan :

Karena :visiblemerupakan ekstensi jQuery dan bukan bagian dari spesifikasi CSS, permintaan menggunakan :visibletidak dapat mengambil keuntungan dari peningkatan kinerja yang disediakan oleh querySelectorAll()metode DOM asli . Untuk mencapai kinerja terbaik saat menggunakan :visibleuntuk memilih elemen, pertama pilih elemen menggunakan pemilih CSS murni, lalu gunakan .filter(":visible").

Juga, jika Anda khawatir tentang kinerja, Anda harus memeriksa Sekarang Anda melihat saya ... tampilkan / sembunyikan kinerja (2010-05-04). Dan gunakan metode lain untuk menunjukkan dan menyembunyikan elemen.


214

Ini berfungsi untuk saya, dan saya menggunakan show()dan hide()membuat div saya tersembunyi / terlihat:

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

213

Cara visibilitas elemen dan jQuery bekerja ;

Suatu elemen dapat disembunyikan dengan display:none, visibility:hiddenatau opacity:0. Perbedaan antara metode-metode tersebut:

  • display:none menyembunyikan elemen, dan tidak memakan ruang apa pun;
  • visibility:hidden menyembunyikan elemen, tetapi masih membutuhkan ruang di tata letak;
  • opacity:0menyembunyikan elemen sebagai "visibility: hidden", dan masih membutuhkan ruang dalam tata letak; satu-satunya perbedaan adalah bahwa opacity memungkinkan seseorang untuk membuat elemen transparan;

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

    Metode beralih jQuery yang berguna:

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

20
Perbedaan lain antara visibility:hiddendanopacity:0 adalah bahwa elemen masih akan merespons acara (seperti klik) dengan opacity:0. Saya belajar bahwa trik membuat tombol kustom untuk unggahan file.
urraka

1
juga jika Anda menyembunyikan input dengan opacity: 0, itu masih akan dipilih dengan tombol tab
YangombiUmpakati

161

Anda juga dapat melakukan ini menggunakan JavaScript biasa:

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

Catatan:

  1. Bekerja di mana saja

  2. Bekerja untuk elemen bersarang

  3. Bekerja untuk CSS dan gaya inline

  4. Tidak membutuhkan kerangka kerja


6
Bekerja sedikit berbeda dengan jQuery; menganggap visibility: hiddenmenjadi terlihat .
alex

4
Cukup mudah untuk mengubah kode di atas untuk meniru perilaku jQuery (yang bisa dibilang bodoh). . . . . function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} lain jika (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} return false;}
Matt Brock

3
Tentu, saya baru saja menambahkan itu untuk kepentingan pengguna yang menggunakan ini tanpa memindai kodenya. :)
alex

160

Saya akan menggunakan kelas CSS .hide { display: none!important; } .

Untuk menyembunyikan / menunjukkan, saya menelepon .addClass("hide")/.removeClass("hide"). Untuk memeriksa visibilitas, saya menggunakan.hasClass("hide") .

Ini adalah cara sederhana dan jelas untuk memeriksa / menyembunyikan / menampilkan elemen, jika Anda tidak berencana untuk menggunakan .toggle()atau .animate()metode.


11
.hasClass('hide')tidak memeriksa apakah leluhur orang tua disembunyikan (yang akan membuatnya juga tersembunyi). Anda mungkin bisa membuat ini bekerja dengan benar dengan memeriksa jika .closest('.hide').length > 0, tetapi mengapa menemukan kembali kemudi?
nbrooks

1
Varian yang Anda usulkan pengembalian jika elemen terlihat pada html, varian saya kembali jika elemen langsung disembunyikan oleh kode javascript / mesin tampilan Anda. Jika Anda tahu bahwa elemen induk tidak boleh disembunyikan - gunakan .hasClass () untuk lebih ketat dan mencegah bug di masa depan. Jika Anda ingin memeriksa tidak hanya visibilitas tetapi keadaan elemen diatur juga - gunakan .hasClass () juga. Dalam kasus lain .closest () lebih baik.
Evgeny Levin

1
Mengapa Anda tidak menggunakan saja .is (": visible")?
dont_trust_me

138

Demo Link

$('#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"/>

Sumber:

Blogger Plug n Play - Alat dan Widget jQuery: Cara Melihat apakah Elemen disembunyikan atau Terlihat Menggunakan jQuery


1
@Adrew tetapi tautan ini menunjukkan contoh fungsi ini yang berfungsi. Saya pikir jawaban praktis mungkin lebih berat dari satu halaman penuh teks :)
Code Spy

133

Seseorang dapat menggunakan atribut hiddenatau visible, seperti:

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

Atau Anda dapat menyederhanakan sama dengan yaitu sebagai berikut.

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

130

ebdivharus diatur ke style="display:none;". Ini berfungsi untuk menampilkan dan menyembunyikan:

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

118

Jawaban lain yang harus Anda pertimbangkan adalah jika Anda menyembunyikan suatu elemen, Anda harus menggunakan jQuery , tetapi alih-alih menyembunyikannya, Anda menghapus seluruh elemen, tetapi Anda menyalin konten HTML dan tag itu sendiri ke dalam variabel jQuery, dan kemudian yang perlu Anda lakukan adalah menguji apakah ada tag seperti itu di layar, menggunakan normal if (!$('#thetagname').length).


100

Saat menguji elemen terhadap :hiddenpemilih di jQuery, harus dipertimbangkan bahwa elemen yang diposisikan absolut dapat dikenali sebagai disembunyikan meskipun elemen turunannya terlihat .

Ini tampaknya agak kontra-intuitif pada awalnya - meskipun melihat lebih dekat pada dokumentasi jQuery memberikan informasi yang relevan:

Elemen dapat dianggap tersembunyi karena beberapa alasan: [...] Lebar dan tinggi mereka secara eksplisit ditetapkan ke 0. [...]

Jadi ini sebenarnya masuk akal dalam hal model kotak dan gaya yang dihitung untuk elemen. Bahkan jika lebar dan tinggi tidak diatur secara eksplisit ke 0, mereka dapat ditetapkan secara implisit .

Lihat contoh berikut:

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>


Pembaruan untuk jQuery 3.x:

Dengan jQuery 3 perilaku yang dijelaskan akan berubah! Elemen akan dianggap terlihat jika mereka memiliki kotak tata letak, termasuk yang memiliki lebar nol dan / atau tinggi.

JSFiddle dengan jQuery 3.0.0-alpha1:

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

Kode JavaScript yang sama kemudian akan memiliki output ini:

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

90

Ini mungkin berhasil:

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

7
Bahasa / dialek / perpustakaan apa ini? Saya tidak terbiasa dengan sintaks ini di JS ...
nbrooks

74

Contoh:

$(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>


66

Untuk memeriksa apakah itu tidak terlihat saya gunakan !:

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

Atau yang berikut ini juga sam, menyimpan pemilih jQuery dalam variabel untuk memiliki kinerja yang lebih baik ketika Anda membutuhkannya beberapa kali:

var $book = $('#book')

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

1
Bagaimana Anda menentukan bahwa menyimpan pemilih dalam variabel benar-benar lebih cepat?
Ilia Rostovtsev

3
Hai @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Di sana Anda dapat menjalankan tes. Bagaimanapun bagus untuk di-cache sehingga dapat diakses lebih cepat
Matthias Wegtun

2
Ini cocok jika Anda ingin menggunakan variabel tunggal melalui proses alih-alih memanggil dan memanggil objek yang sama.
Kenneth Palaganas

60

Gunakan toggling kelas, bukan pengeditan gaya. . .

Menggunakan kelas yang ditujukan untuk elemen "persembunyian" itu mudah dan juga salah satu metode yang paling efisien. Beralih kelas 'tersembunyi' dengan Displaygaya 'tidak ada' akan melakukan lebih cepat daripada mengedit gaya itu secara langsung. Saya menjelaskan beberapa dari pertanyaan Stack Overflow ini. Mengubah dua elemen terlihat / tersembunyi di div yang sama .


Praktik Terbaik dan Optimasi JavaScript

Berikut adalah video Google Tech Talk yang benar-benar mencerahkan oleh insinyur front-end Google Nicholas Zakas:


60

Contoh penggunaan cek yang terlihat untuk adblocker diaktifkan:

$(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" adalah ID yang blok adblocker. Jadi, periksa apakah terlihat Anda dapat mendeteksi apakah adblocker dihidupkan.


58

Bagaimanapun, tidak ada contoh yang cocok untuk saya, jadi saya menulis sendiri.

Tes (tidak ada dukungan Internet Explorer filter:alpha):

a) Periksa apakah dokumen tidak disembunyikan

b) Periksa apakah suatu elemen memiliki lebar nol / tinggi / opacity atau display:none/ visibility:hiddendalam gaya inline

c) Periksa apakah pusat (juga karena lebih cepat daripada menguji setiap piksel / sudut) elemen tidak disembunyikan oleh elemen lain (dan semua leluhur, contoh: overflow:hidden/ gulir / satu elemen di atas yang lain) atau tepi layar

d) Periksa apakah suatu elemen memiliki lebar nol / tinggi / opasitas atau display:none/ visibilitas: disembunyikan dalam gaya yang dihitung (di antara semua leluhur)

Diuji pada

Android 4.4 (Browser asli / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 mode dokumen + Internet Explorer 8 pada mesin virtual), dan 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;
    }
})();

Cara Penggunaan:

is_visible(elem) // boolean

50

Anda perlu memeriksa keduanya ... Tampilan serta visibilitas:

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

Jika kami memeriksa $(this).is(":visible"), jQuery memeriksa kedua hal secara otomatis.


41

Mungkin Anda bisa melakukan hal seperti ini

$(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>


37

Cukup periksa visibilitas dengan memeriksa nilai boolean, seperti:

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

Saya menggunakan kode ini untuk setiap fungsi. Kalau tidak, Anda dapat menggunakan is(':visible')untuk memeriksa visibilitas suatu elemen.


34

Karena Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(seperti yang dijelaskan untuk jQuery: visible Selector ) - kita dapat memeriksa apakah elemen benar - benar terlihat dengan cara ini:

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


30

Fungsi dapat dibuat untuk memeriksa atribut visibilitas / tampilan untuk mengukur apakah elemen ditampilkan di UI atau tidak.

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

Biola yang Bekerja


29

Juga inilah ekspresi kondisional ternary untuk memeriksa keadaan elemen dan kemudian beralih:

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

4
Atau, ya, singkirkan saja kondisional dan katakan $('elementToToggle').toggle('slow');...:)
nbrooks

29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.