it-swarm-eu.dev

Jak zkontroluji, zda je prvek v jQuery skrytý?

Viditelnost prvku lze přepínat pomocí funkcí .hide(), .show() nebo .toggle().

Jak byste testovali, zda je prvek viditelný nebo skrytý?

7074
Philip Morton

Vzhledem k tomu, že se tato otázka vztahuje na jeden prvek, může být tento kód vhodnější:

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

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

Stejný jako twernt návrh , ale aplikovaný na jediný prvek; a to odpovídá algoritmu doporučenému v jQuery FAQ

8738
Tsvetomir Tsonev

Můžete použít přepínač hidden selector:

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

A visible selector:

// Matches all elements that are visible
$('element:visible')
1339
twernt
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Výše uvedená metoda nebere v úvahu viditelnost rodiče. Chcete-li zvážit i rodiče, měli byste použít .is(":hidden") nebo .is(":visible").

Například,

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

Výše uvedená metoda bude považovat div2 viditelné při :visible ne. Ale výše uvedené by mohly být užitečné v mnoha případech, zejména pokud potřebujete zjistit, zda je v skrytém rodiče viditelná nějaká chyba divs, protože v takových podmínkách :visible nebude fungovat.

850
Mote

Žádná z těchto odpovědí se nezabývá otázkou, kterou chápu jako otázku, kterou jsem hledal, "Jak mohu zpracovávat položky, které mají visibility: hidden?" . Ani :visible ani :hidden to nezvládnou, protože oba hledají zobrazení podle dokumentace. Pokud jsem mohl určit, není k dispozici volič, který by se staral o viditelnost CSS. Zde jsem vysvětlil, jak jsem to vyřešil (standardní jQuery selectory, může existovat více zkrácené syntaxe):

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

Z Jak zjistím stav přepnutého prvku?


Pomocí voličů :visible a :hidden můžete určit, zda je prvek sbalen nebo ne.

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

Pokud prostě jedete na prvek založený na jeho viditelnosti, můžete do výrazu selektoru zahrnout pouze :visible nebo :hidden. Například:

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

Často, když kontrolujete, zda je něco viditelné nebo ne, budete okamžitě pokračovat a dělat s ním něco jiného. jQuery řetězení je to snadné.

Pokud tedy máte selektor a chcete na něm provádět nějakou akci pouze v případě, že je viditelná nebo skrytá, můžete použít filter(":visible") nebo filter(":hidden") následované zřetězením akce, kterou chcete provést.

Namísto příkazu if takhle:

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

Nebo efektivnější, ale i ošklivější:

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

Můžete to udělat v jednom řádku:

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

Volič :visible podle dokumentace jQuery :

  • Mají CSS display hodnotu none.
  • Jsou to prvky formuláře s type="hidden".
  • Jejich šířka a výška jsou explicitně nastaveny na 0.
  • Element předků je skrytý, takže prvek není na stránce zobrazen.

Prvky s visibility: hidden nebo opacity: 0 jsou považovány za viditelné, protože stále spotřebovávají místo v rozvržení.

To je užitečné v některých případech a zbytečné v jiných, protože pokud chcete zkontrolovat, zda je prvek viditelný (display != none), ignorovat viditelnost rodičů, zjistíte, že dělat .css("display") == 'none' je nejen rychlejší, ale také správně vrátí kontrolu viditelnosti. .

Chcete-li zkontrolovat viditelnost místo zobrazení, měli byste použít: .css("visibility") == "hidden".

Berte také v úvahu další poznámky jQuery :

Protože :visible je rozšíření jQuery a není součástí specifikace CSS, dotazy využívající :visible nemohou využít zvýšení výkonu poskytované nativní metodou DOM querySelectorAll(). Chcete-li dosáhnout nejlepšího výkonu při použití :visible k výběru prvků, nejprve vyberte prvky pomocí čistého voliče CSS a pak použijte .filter(":visible").

Také pokud máte obavy o výkon, měli byste zkontrolovat Teď mě vidíte… zobrazit/skrýt výkon (2010-05-04). Pro zobrazení a skrytí prvků použijte jiné metody.

211
Pedro Rainho

Toto funguje pro mě a používám show() a hide(), aby se můj div skrýval/viděl:

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

Jak viditelnost prvku a jQuery funguje;

Prvek může být skryt s display:none, visibility:hidden nebo opacity:0. Rozdíl mezi těmito metodami:

  • display:none skryje prvek a nezabírá žádný prostor;
  • visibility:hidden skryje prvek, ale stále zabírá prostor v rozvržení;
  • opacity:0 skryje prvek jako "viditelnost: skryté" a stále zabírá prostor v rozvržení; Jediný rozdíl je v tom, že neprůhlednost umožňuje, aby prvek byl částečně průhledný; 

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

    Užitečné metody přepínání jQuery: 

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

Použil bych CSS třídu .hide { display: none!important; }

Pro skrytí/zobrazení, volám .addClass("hide")/.removeClass("hide"). Pro kontrolu viditelnosti používám .hasClass("hide").

Je to jednoduchý a jasný způsob, jak kontrolovat/skrýt/zobrazit prvky, pokud neplánujete používat metody .toggle() nebo .animate().

146
Evgeny Levin

Můžete to také provést pomocí prostého JavaScriptu:

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

Poznámky:

  1. Pracuje všude

  2. Pracuje pro vnořené prvky

  3. Pracuje pro styly CSS a inline

  4. Nevyžaduje rámec

141
Matt Brock

Jednoduše lze použít atribut hidden nebo visible, například:

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

Nebo to můžete zjednodušit pomocí is takto.

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

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

Zdroj: 

Blogger Plug n Play - jQuery Nástroje a widgety: Jak zjistit, zda je prvek skryt nebo viditelný pomocí jQuery

111
Code Spy

Další odpověď, kterou byste měli zvážit, je, pokud skryjete prvek, měli byste použít jQuery , ale místo toho, abyste jej skryli, odstraníte celý prvek, ale zkopírujete jeho HTML content a tag sám do proměnné jQuery, a pak vše, co musíte udělat, je otestovat, zda je na obrazovce taková značka, pomocí normální if (!$('#thetagname').length).

110
think123

ebdiv by mělo být nastaveno na style="display:none;". Funguje pro zobrazení i skrytí:

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

Při testování prvku proti voliči :hidden v jQuery je třeba vzít v úvahu, že absolutně umístěný prvek může být rozpoznán jako skrytý, přestože jejich podřízené elementy jsou viditelné.

V první řadě to vypadá poněkud proti-intuitivně - i když se blíže podíváte na dokumentaci jQuery, získáte relevantní informace:

Prvky lze považovat za skryté z několika důvodů: [...] Jejich šířka a výška jsou explicitně nastaveny na 0. [...]

Tak to vlastně dává smysl, pokud jde o box-model a vypočítaný styl pro prvek. I když šířka a výška nejsou nastaveny explicitně až 0, mohou být nastaveny implicitně.

Podívejte se na následující příklad:

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>


AKTUALIZACE PRO JQUERY 3.x:

S jQuery 3 se popsané chování změní! Prvky budou považovány za viditelné, pokud mají libovolné rozvržení, včetně polí s nulovou šířkou a/nebo výškou.

JSFiddle s jQuery 3.0.0-alpha1:

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

Stejný JS pak bude mít tento výstup:

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

To může fungovat:

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

Příklad: 

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

Chcete-li zkontrolovat, zda není vidět, používám !:

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

Nebo následující je také sam, který ukládá selektor jQuery do proměnné, aby měl lepší výkon, když ho potřebujete vícekrát:

var $book = $('#book')

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

Použijte třídu přepínání, nikoli úpravy stylů. . .

Použití tříd určených pro "skrytí" prvků je snadné a také jednou z nejúčinnějších metod. Přepnutí třídy 'skrytý' s Display stylem 'none' bude probíhat rychleji než přímo editování tohoto stylu. Vysvětlil jsem některé z toho docela důkladně v otázce Stack Overflow Otočení dvou prvků viditelných/skrytých ve stejném div.


JavaScript osvědčené postupy a optimalizace

Zde je opravdu poučné video z Google Tech Talk od Google front-end inženýra Nicholas Zakas:

59
Lopsided

Je aktivován příklad použití visible check for adblocker:

$(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" je ID, které blokuje blokování. Pokud je tedy kontrola viditelná, dokážete zjistit, zda je adblocker zapnutý.

56
Roman Losev

Koneckonců, žádný příklad mi nevyhovuje, tak jsem napsal vlastní.

Testy (bez podpory Internet Explorer filter:alpha):

a) Zkontrolujte, zda dokument není skryt

b) Zkontrolujte, zda má prvek nulovou šířku/výšku/opacitu nebo display:nonevisibility:hidden v inline stylech

c) Zkontrolujte, zda střed (také proto, že je rychlejší než testování každého pixelu/rohu) elementu není skrytý jiným prvkem (a všemi předky, například: overflow:hidden/scroll/jeden prvek nad enother) nebo hranami obrazovky

d) Zkontrolujte, zda má prvek nulovou šířku/výšku/opacitu nebo display:none/viditelnost: skrytý ve vypočítaných stylech (mezi všemi předky)

_/Testováno dne

Android 4.4 (Nativní prohlížeč/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (režimy dokumentů Internet Explorer 5-11 + Internet Explorer 8 na virtuálním počítači), 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;
    }
})();

Jak používat:

is_visible(elem) // boolean
55
Aleko

Musíte zkontrolovat jak ... Displej i viditelnost:

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

Pokud zkontrolujeme $(this).is(":visible"), jQuery automaticky zkontroluje obě věci.

50

Možná můžete něco takového udělat

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

Jednoduše zkontrolujte viditelnost zaškrtnutím booleovské hodnoty, například:

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

Použil jsem tento kód pro každou funkci. V opačném případě můžete použít is(':visible') pro kontrolu viditelnosti prvku.

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

Ale co když je CSS elementu následující?

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

Takže tato odpověď na otázku Stack Overflow otázka Jak zkontrolovat, zda je prvek mimo obrazovku by mělo být také zváženo.

30
RN Kushwaha

Také zde je ternární podmíněný výraz pro kontrolu stavu prvku a jeho přepnutí:

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

Funkci lze vytvořit za účelem kontroly atributů viditelnosti/zobrazení, aby bylo možné zjistit, zda je prvek zobrazen v uživatelském rozhraní nebo ne. 

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

Pracovní Fiddle

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

Hledal jsem to, a žádná z odpovědí není správná pro můj případ, takže jsem vytvořil funkci, která vrátí falešnou, pokud oči nevidí prvek

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

Toto je způsob, jak jQuery interně řeší tento problém:

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

Pokud jQuery nepoužíváte, můžete tento kód jednoduše využít a proměnit ho ve svou vlastní funkci:

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

Který isVisible vrátí true, pokud je prvek viditelný.

15
Oriol

Jednoduše zkontrolujte, zda je tento prvek viditelný a vrátí boolean , jQuery skryje elementy přidáním zobrazení žádný prvek, takže pokud chcete používat čistý JavaScript, můžete to udělat, například:

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

Můžete také použít jQuery jako zbytek kódu pomocí tohoto kódu a máte menší blok kódu, něco jako níže v jQuery, udělat stejnou stopu pro vás:

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

Také pomocí css metody v jQuery může mít stejný výsledek:

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

Také v případě kontroly viditelnosti a zobrazení můžete provést následující:

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

Existuje několik způsobů, jak zjistit, zda je prvek v jQuery viditelný nebo skrytý.

Demo HTML například reference

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

Použít volič filtru viditelnosti $('element:hidden') nebo $('element:visible')

  • $('element:hidden'): Vybere všechny prvky, které jsou skryté.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): Vybere všechny viditelné prvky.

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

Přečtěte si více na http://api.jquery.com/category/selectors/visibility-filter-selectors/

Použít is() Filtrování

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

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

Další informace naleznete na adrese http://api.jquery.com/is/

14
Arun Karnawat

Jako hide(), show() a toggle() připevní vložený css (displej: žádný nebo displej: blok) k elementu. Podobně můžeme snadno použít ternární operátor ke kontrole elementu počasí, který je skryt nebo viditelný kontrolou css displeje.

AKTUALIZACE:

  • Musíte také zkontrolovat, zda je prvek css nastaven na viditelnost: „viditelné“ nebo viditelnost: „skryté“
  • Prvek bude také viditelný, pokud je vlastnost zobrazení nastavena na inline blok, blok, flex.

Můžeme tedy zkontrolovat vlastnosti prvku, který ho činí neviditelným. Takže jsou display: none a visibility: "hidden";

Můžeme vytvořit objekt pro kontrolu vlastnosti zodpovědné za skrytí prvku:

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

Můžeme zkontrolovat smyčkou přes každou hodnotu klíče v objektovém shodě, pokud vlastnost elementu pro klíč odpovídá skryté hodnotě vlastnosti.

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

Chcete-li zkontrolovat vlastnost jako výška prvku: 0 nebo šířka: 0 nebo více, můžete tento objekt rozšířit a přidat k němu další vlastnost a můžete ji zkontrolovat.

Děkuji @ Krzysztof Przygoda za připomenutí mi jiné vlastnosti zobrazení.

14
No one

Můžete použít toto:

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

Příklad kódu

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

To je nějaká možnost pro kontrolu, zda je značka viditelná nebo ne

 // 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

Chci jen objasnit, že v jQuery

Prvky lze považovat za skryté z několika důvodů:

  • Mají zobrazenou hodnotu CSS žádný.
  • Jedná se o prvky formuláře s typem = "hidden".
  • Jejich šířka a výška jsou explicitně nastaveny na 0.
  • Element předků je skrytý, takže prvek není na stránce zobrazen.

Prvky s viditelností: skryté nebo neprůhledné: 0 jsou považovány za viditelné, protože stále spotřebovávají místo v rozvržení. Během animací, které skryjí prvek, je prvek považován za viditelný až do konce animace.

Zdroj: : hidden Selector | Dokumentace API jQuery

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

Můžete pouze přidat třídu, když je viditelná. Přidat třídu, show. Pak zkontrolujte, zda má třídu:

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

Vrátí hodnotu true, pokud máte třídu show.

Přidat CSS takto:

.show{ display: block; }
9
Sahan

Existuje příliš mnoho metod pro kontrolu skrytých prvků. To je nejlepší volba (doporučil jsem vám):

Pomocí jQuery vytvořte element, "display: none", v CSS pro skryté.

Jde o to:

$('element:visible')

A příklad použití:

$('element:visible').show();
7

Stačí zkontrolovat atribut display (nebo visibility podle toho, jaký druh neviditelnosti dáváte přednost). Příklad:

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

Můžete použít 

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

Dokumentace API: https://api.jquery.com/visible-selector/

4
Wolfack

1 • jQuery řešení

Metody určení, zda je prvek viditelný v JQuery

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

Smyčka všech dětí ve skupině visible div prvku id 'myelement':

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

Nakoukl na zdroj jQuery

Takto jQuery implementuje tuto funkci:

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

2 • Jak zkontrolovat, zda je prvek mimo obrazovku - CSS

Pomocí Element.getBoundingClientRect () můžete snadno zjistit, zda je váš prvek uvnitř hranic vašeho výřezu (tj. Na obrazovce nebo mimo obrazovku):

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

Pak byste to mohli použít několika způsoby:

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

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

Používáte-li funkci Úhlová, zkontrolujte: Nepoužívejte skrytý atribut pomocí Angular

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

Někdy, pokud chcete zkontrolovat, zda je prvek viditelný na stránce, v závislosti na viditelnosti jeho parrentu, můžete zkontrolovat, zda width a height prvku, jsou rovny 0, obojí.

jQuery

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

Vanilka

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

Nebo

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

2
Profesor08

Třídu css můžete použít, když je viditelná nebo skrytá přepínáním třídy.

.show{ display :block; }

Nastavte jQuery toggleClass() nebo addClass() nebo removeClass();.

Jako příklad,

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

Výše uvedený kód přidá třídu show css, pokud prvek nemá show a odstraní se, když má třídu show.

Když kontrolujete, zda je viditelný nebo ne, můžete tento kód jQuery sledovat,

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

Výše uvedený kód vrátí boolean (true), když prvek #myID má naši třídu (show) a false, když nemá třídu (show).

0
Sahan

Namísto psaní event pro každé jedno element, postupujte takto:

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

Také jej můžete použít na vstupech:

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

Můžeš to udělat:

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

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

jQuery řešení, docela stará otázka, ale stále jsem padl mohu dát trochu lepší odpověď pro ty, kteří chtějí změnit text tlačítka stejně.

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

Abychom byli spravedliví, otázka předchází tuto odpověď. Dodávám, že OP nekritizuji, nýbrž pomáhám každému, kdo se na tuto otázku stále ptá.

Správný způsob, jak určit, zda je něco viditelné, je konzultovat váš model pohledu. Pokud nevíte, co to znamená, pak se chystáte na cestu objevování, která učiní vaši práci mnohem méně obtížnou.

Zde je přehled model-view-viewmodel architektura (MVVM).

KnockoutJS je závazná knihovna, která vám umožní vyzkoušet si tento materiál bez učení celého rámce.

A tady je několik JS a DIV, které mohou nebo nemusí být viditelné.

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

Všimněte si, že přepínací funkce nekontroluje DOM k určení viditelnosti div, konzultuje model pohledu.

0
Peter Wone