2013-04-27 21 views
7

Ho una funzione javascript che cerca di determinare se un div è visibile e fa vari processi con quella variabile. Sono in grado di scambiare con successo una visibilità degli elementi cambiando la visualizzazione tra nessuno e il blocco; ma non riesco a memorizzare questo valore ...Finding se elemento è visibile (JavaScript)

ho cercato di ottenere il valore di attributo elementi di visualizzazione e di trovare se l'ID l'elemento è visibile ma non ha funzionato. Quando provo .getAttribute restituisce sempre null; Non so perché, perché so che l'ID è definito e ha un attributo di visualizzazione.

Ecco il codice dei due metodi diversi che ho provato:

var myvar = $("#mydivID").is(":visible"); 
var myvar = document.getElementById("mydivID").getAttribute("display"); 

Qualsiasi orientamento o di assistenza sarebbe molto apprezzato.

+4

'display' è un membro della proprietà' style', non un attributo. – MaxArt

+0

@MaxArt: Ho provato con visibile come pure, ma che non ha funzionato troppo. Quindi, se non posso chiamare Display perché è una proprietà CSS e non un attributo JavaScript come faccio a monitorare questo? –

+0

Come si fa a definire "visibile"? Anche gli elementi al di fuori del viewport sono importanti? Anche "visibilità: nascosta" conta? –

risposta

9

display non è un attributo, è una proprietà CSS all'interno dell'attributo style.

Si può essere alla ricerca di

var myvar = document.getElementById("mydivID").style.display; 

o

var myvar = $("#mydivID").css('display'); 
16

Prova in questo modo:

$(function() { 
    // Handler for .ready() called. 
    if ($("#mydivID").is(":visible")) { 
     alert('Element is visible'); 
    } 
}); 

FIDDLE

Assicurati di includere il file jQuery all'interno del tag head, come segue

<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
+1

@Derek 朕 會 功夫: Perché OP ha chiaramente affermato nella domanda che questo approccio è stato tentato, e non ha funzionato. –

+0

@amnotiam Non molto chiaramente, per dire. – SeinopSys

+1

@amnotiam - Anche se ha detto che non ha funzionato, il codice di Palash sembra totalmente valido anche io. –

6

Diamo un secondo per vedere che cosa sta facendo .is(":visible") in jQuery, che ne dite?

Ecco un link: https://github.com/jquery/jquery/blob/master/src/css.js#L529

return !jQuery.expr.filters.hidden(elem);

dove

jQuery.expr.filters.hidden = function(elem) { 
    // Support: Opera <= 12.12 
    // Opera reports offsetWidths and offsetHeights less than zero on some elements 
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0; 
}; 

Quindi, è solo controllando la larghezza offset e altezza dell'elemento.

Detto, e anche interessante notare, quando jQuery verifica se un elemento è nascosto (cioè come quando innescando un evento 'ginocchiera'), viene eseguito un controllo sulla proprietà visualizzazione e la sua esistenza nel dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43

+1

Per essere onesti, questa non è * veramente * una risposta alla domanda. – SeinopSys

+0

Non sono sicuro di quale versione di jQuery sia, e non mi interessa guardare, ma l'ultima versione fa molto più di questo - 'return elem.offsetWidth <= 0 && elem.offsetHeight <= 0 || \t \t \t (! JQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css (elem, "display")) === "none"); ' – Ian

+0

beh, è fornisce alcune informazioni sul motivo per cui ciò che stava provando non stava funzionando e/o l'approccio giusto, e quindi fornisce informazioni su ciò che dovrebbe essere fatto che sta ottenendo la proprietà 'display', che hai già risposto ... quindi .... –

3

Se volete fare questo unico modo javascript si può provare

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')