javascript - div - jquery select element if visible
Come posso verificare se un elemento è nascosto in jQuery? (20)
Utilizzare la commutazione della classe, non la modifica dello stile. . .
Usare le classi designate per "nascondere" gli elementi è facile e anche uno dei metodi più efficienti. La commutazione di una classe "nascosta" con uno stile di Display
di "nessuno" viene eseguita più rapidamente rispetto alla modifica diretta di tale stile. Ho spiegato in modo abbastanza approfondito questo argomento in Stack Overflow question Girando due elementi visibili / nascosti nello stesso div .
Best practice e ottimizzazione di JavaScript
Ecco un video davvero illuminante di un tecnico di front-end Google Tech Talk di Google, Nicholas Zakas:
- Velocizza il tuo Javascript (YouTube)
È possibile alternare la visibilità di un elemento, usando le funzioni .hide()
, .toggle()
o .toggle()
.
Come verificherai se un elemento è visibile o nascosto?
È possibile creare una funzione per verificare la visibilità / gli attributi di visualizzazione al fine di valutare se l'elemento è mostrato nell'interfaccia utente o meno.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
Come funzionano la visibilità degli elementi e jQuery ;
Un elemento potrebbe essere nascosto con display:none
, visibility:hidden
o opacity:0
. La differenza tra questi metodi:
-
display:none
nasconde l'elemento e non occupa spazio; -
visibility:hidden
nasconde l'elemento, ma occupa ancora spazio nel layout; opacity:0
nasconde l'elemento come "visibilità: nascosto" e occupa ancora spazio nel layout; l'unica differenza è che l'opacità consente di rendere un elemento parzialmente trasparente;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: "" }); }
Metodi di commutazione jQuery utili:
$('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); });
Da Come determino lo stato di un elemento attivato?
È possibile determinare se un elemento è compresso o meno utilizzando i selettori :visible
e :hidden
.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Se stai semplicemente agendo su un elemento basato sulla sua visibilità, puoi semplicemente includere :visible
o :hidden
nell'espressione selettore. Per esempio:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
Dopotutto, nessuno degli esempi mi va bene, così ho scritto il mio.
Test (nessun supporto del filter:alpha
di Internet Explorer filter:alpha
):
a) Controllare se il documento non è nascosto
b) Controlla se un elemento ha zero larghezza / altezza / opacità o display:none
/ visibility:hidden
negli stili in linea
c) Verifica se il centro (anche perché è più veloce di testare ogni pixel / angolo) dell'elemento non è nascosto da un altro elemento (e da tutti gli antenati, ad esempio: overflow:hidden
/ scorrimento / un elemento oltre l'eno) o bordi dello schermo
d) Verifica se un elemento ha zero larghezza / altezza / opacità o display:none
/ visibilità: nascosto negli stili calcolati (tra tutti gli antenati)
Testato su
Android 4.4 (browser nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (modalità documento Internet Explorer 5-11 + Internet Explorer 8 su una macchina virtuale), 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;
}
})();
Come usare:
is_visible(elem) // boolean
Esempio:
$(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>
Il :visible
selettore :visible
base alla documentazione di jQuery :
- Hanno un valore di
display
CSS pari anone
.- Sono elementi di forma con
type="hidden"
.- La loro larghezza e altezza sono esplicitamente impostate su 0.
- Un elemento antenato è nascosto, quindi l'elemento non è mostrato nella pagina.
Elementi con
visibility: hidden
oopacity: 0
sono considerati visibili, dal momento che occupano ancora spazio nel layout.
Questo è utile in alcuni casi e inutile in altri, perché se vuoi controllare se l'elemento è visibile ( display != none
), ignorando la visibilità dei genitori, troverai che fa .css("display") == 'none'
non è solo più veloce, ma restituirà anche il controllo della visibilità correttamente.
Se si desidera verificare la visibilità anziché la visualizzazione, è necessario utilizzare: .css("visibility") == "hidden"
.
Prendi anche in considerazione le note aggiuntive di jQuery :
Perché
:visible
è un'estensione jQuery e non fa parte delle specifiche CSS, le query che utilizzano:visible
non può sfruttare l'incremento di prestazioni fornito dal metodo nativo DOMquerySelectorAll()
. Per ottenere le migliori prestazioni quando si utilizza:visible
per selezionare gli elementi, prima selezionare gli elementi usando un puro selettore CSS, quindi utilizzare.filter(":visible")
.
Inoltre, se sei preoccupato per le prestazioni, dovresti controllare Ora mi vedi ... mostra / nascondi la performance (2010-05-04). E usa altri metodi per mostrare e nascondere elementi.
Inoltre, ecco un'espressione condizionale ternaria per controllare lo stato dell'elemento e quindi per alternarlo:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
Ma cosa succede se il CSS dell'elemento è come il seguente?
.element{
position: absolute;left:-9999;
}
Quindi questa risposta alla domanda Come verificare se un elemento è fuori dallo schermo dovrebbe anche essere considerato.
Nessuna di queste risposte risponde a quello che capisco essere la domanda, che è quello che stavo cercando, "Come gestisco gli oggetti che hanno visibility: hidden
?" . Né :visible
né :hidden
gestirà questo, in quanto entrambi cercano la visualizzazione per la documentazione. Per quanto ho potuto determinare, non esiste un selettore per gestire la visibilità CSS. Ecco come ho risolto (selettori jQuery standard, potrebbe esserci una sintassi più sintetica):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
Perché Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout
(come descritto per jQuery: Selettore visibile ) - possiamo verificare se l'elemento è veramente visibile in questo modo:
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;
}
});
Poiché la domanda si riferisce a un singolo elemento, questo codice potrebbe essere più adatto:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
Come il suggerimento di twernt , ma applicato a un singolo elemento; e corrisponde all'algoritmo raccomandato nelle FAQ di jQuery
Quando si verifica un elemento contro :hidden
selettore :hidden
in jQuery, si deve considerare che un elemento posizionato in modo assoluto può essere riconosciuto come nascosto sebbene i loro elementi figli siano visibili .
Ciò sembra alquanto controintuitivo in primo luogo, anche se dare un'occhiata più da vicino alla documentazione di jQuery fornisce le informazioni rilevanti:
Gli elementi possono essere considerati nascosti per diversi motivi: [...] La loro larghezza e altezza sono esplicitamente impostati su 0. [...]
Quindi questo ha davvero senso per quanto riguarda il modello di box e lo stile calcolato per l'elemento. Anche se larghezza e altezza non sono impostate esplicitamente su 0, possono essere impostate implicitamente .
Dai un'occhiata al seguente esempio:
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>
AGGIORNAMENTO PER JQUERY 3.x:
Con jQuery 3 il comportamento descritto cambierà! Gli elementi saranno considerati visibili se hanno caselle di layout, comprese quelle di larghezza e / o altezza zero.
JSFiddle con jQuery 3.0.0-alpha1:
Lo stesso JS avrà quindi questo output:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
Questo potrebbe funzionare:
expect($("#message_div").css("display")).toBe("none");
Si può semplicemente usare l'attributo hidden
o visible
, come:
$('element:hidden')
$('element:visible')
O è possibile semplificare lo stesso con è il seguente.
$(element).is(":visible")
Un'altra risposta che dovresti prendere in considerazione è se stai nascondendo un elemento, dovresti usare jQuery , ma invece di nasconderlo in realtà, rimuovi l'intero elemento, ma copi il suo contenuto HTML e il tag stesso in una variabile jQuery, e poi tutto ciò che devi fare è testare se c'è un tale tag sullo schermo, usando la normale if (!$('#thetagname').length)
.
Vorrei usare la classe CSS. .hide { display: none!important; }
.hide { display: none!important; }
.
Per nascondere / mostrare, chiamo .addClass("hide")/.removeClass("hide")
. Per verificare la visibilità, utilizzo .hasClass("hide")
.
È un modo semplice e chiaro per controllare / nascondere / mostrare gli elementi, se non si prevede di utilizzare i .toggle()
o .animate()
.
$('#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="" />
Fonte:
jsFiddle:
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// element is hidden
}
Il metodo sopra non considera la visibilità del genitore. Per considerare anche il genitore, dovresti usare .is(":hidden")
o .is(":visible")
.
Per esempio,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
Il metodo sopra considererà
div2
visibile mentre:visible
no. Ma quanto sopra potrebbe essere utile in molti casi, specialmente quando è necessario trovare se ci sono errori div visibili nel genitore nascosto perché in tali condizioni:visible
non funzionerà.