Comment vérifier si un élément est caché dans jQuery?
Il est possible de changer la visibilité d'un élément en utilisant les fonctions .hide(), .show() ou .toggle().
Comment vérifierais-tu si un élément est visible ou caché?
Puisque la question fait référence à un seul élément, ce code pourrait être plus approprié:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
Identique à la suggestion de twernt , mais appliquée à un seul élément; et il correspond à l'algorithme recommandé dans jQuery FAQ
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// element is hidden
}
La méthode ci-dessus ne prend pas en compte la visibilité du parent. Pour considérer également le parent, vous devez utiliser .is(":hidden") ou .is(":visible").
Par exemple,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
La méthode ci-dessus considérera
div2visible tandis que:visiblene le sera pas. Mais ce qui précède peut être utile dans de nombreux cas, en particulier lorsque vous avez besoin de savoir s’il existe des divisions d’erreur visibles dans le parent masqué, car dans ces conditions,:visiblene fonctionnera pas.
Aucune de ces réponses ne répond à ce que je comprends être la question, qui est ce que je cherchais, "Comment gérer les éléments qui ont visibility: hidden?" . Ni :visible ni :hidden ne gèreront cela, car ils recherchent tous les deux l'affichage selon la documentation. Autant que je sache, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment je l'ai résolu (sélecteurs jQuery standard, il peut y avoir une syntaxe plus condensée):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
De Comment déterminer l’état d’un élément basculé?
Vous pouvez déterminer si un élément est réduit ou non en utilisant les sélecteurs :visible et :hidden.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Si vous agissez simplement sur un élément en fonction de sa visibilité, vous pouvez simplement inclure :visible ou :hidden dans l'expression du sélecteur. Par exemple:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
Souvent, lorsque vous vérifiez si quelque chose est visible ou non, vous allez immédiatement aller de l'avant et faire autre chose avec cela. Le chaînage jQuery facilite les choses.
Ainsi, si vous avez un sélecteur et que vous souhaitez effectuer une action sur celui-ci uniquement s'il est visible ou masqué, vous pouvez utiliser filter(":visible") ou filter(":hidden") suivi de l'enchaînement avec l'action à effectuer.
Donc, au lieu d’une déclaration if, comme ceci:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
Ou plus efficace, mais encore plus laid:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
Vous pouvez tout faire en une seule ligne:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Le sélecteur :visible en fonction de la documentation de jQuery :
- Ils ont une valeur CSS
displaydenone.- Ce sont des éléments de formulaire avec
type="hidden".- Leur largeur et leur hauteur sont explicitement définies sur 0.
- Un élément ancêtre est masqué, ainsi l'élément n'est pas affiché sur la page.
Les éléments avec
visibility: hiddenouopacity: 0sont considérés comme visibles, car ils occupent toujours de l'espace dans la présentation.
Ceci est utile dans certains cas et inutile dans d'autres, car si vous voulez vérifier si l'élément est visible (display != none), en ignorant la visibilité des parents, vous constaterez que faire .css("display") == 'none' est non seulement plus rapide, mais également renvoyer correctement le contrôle de visibilité .
Si vous souhaitez vérifier la visibilité au lieu de l’affichage, vous devez utiliser: .css("visibility") == "hidden".
Prenez également en compte les notes jQuery supplémentaires :
Étant donné que
:visibleest une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant:visiblene peuvent pas tirer parti de l'amélioration des performances fournie par la méthode native DOMquerySelectorAll(). Pour obtenir les meilleures performances lors de l'utilisation de:visiblepour sélectionner des éléments, sélectionnez d'abord les éléments à l'aide d'un sélecteur CSS pur, puis utilisez.filter(":visible").
De plus, si vous êtes préoccupé par les performances, vous devriez vérifier Vous voyez maintenant… afficher/masquer les performances (2010-05-04). Et utilisez d'autres méthodes pour afficher et masquer des éléments.
Cela fonctionne pour moi et j'utilise show() et hide() pour rendre mon div caché/visible
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
Comment la visibilité des éléments et jQuery fonctionnent;
Un élément peut être masqué avec display:none, visibility:hidden ou opacity:0. La différence entre ces méthodes:
display:nonemasque l'élément et n'occupe aucun espace;visibility:hiddenmasque l'élément, mais il prend toujours de la place dans la présentation;opacity:0masque l'élément en tant que "visibilité: masqué" et occupe toujours de la place dans la présentation; la seule différence est que l'opacité permet de rendre un élément partiellement transparent;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: "" }); }Méthodes de basculement jQuery utiles:
$('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); });
J'utiliserais la classe CSS .hide { display: none!important; }.
Pour cacher/montrer, j'appelle .addClass("hide")/.removeClass("hide"). Pour vérifier la visibilité, j'utilise .hasClass("hide").
C'est un moyen simple et clair de vérifier/masquer/afficher les éléments, si vous ne prévoyez pas d'utiliser les méthodes .toggle() ou .animate().
Vous pouvez également le faire en utilisant du JavaScript simple:
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;
}
Remarques:
Fonctionne partout
Fonctionne pour les éléments imbriqués
Fonctionne pour les styles CSS et inline
Ne nécessite pas de cadre
On peut simplement utiliser l'attribut hidden ou visible, comme:
$('element:hidden')
$('element:visible')
Ou vous pouvez simplifier la même chose avec is comme suit.
$(element).is(":visible")
$('#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="" />La source:
Une autre réponse à prendre en compte est que si vous cachez un élément, vous devez utiliser jQuery , mais au lieu de le cacher, vous supprimez l’élément entier, mais vous copiez son HTML content et la balise elle-même dans une variable jQuery, et tout ce que vous avez à faire est de vérifier s’il existe une telle balise à l’écran, en utilisant la fonction if (!$('#thetagname').length) normale.
ebdiv doit être défini sur style="display:none;". Cela fonctionne à la fois afficher et masquer:
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
Lors du test d'un élément par rapport au sélecteur :hidden dans jQuery, il convient de considérer que un élément positionné en absolu peut être reconnu comme étant masqué, bien que ses éléments enfants soient visibles.
Cela semble un peu contre-intuitif en premier lieu - bien que regarder de plus près la documentation de jQuery donne les informations pertinentes:
Les éléments peuvent être considérés comme masqués pour plusieurs raisons: [...] Leurs largeur et hauteur sont explicitement définies sur 0. [...]
Cela a donc du sens en ce qui concerne le modèle de boîte et le style calculé pour l'élément. Même si la largeur et la hauteur ne sont pas définies par explicitement sur 0, elles peuvent l'être par implicitement.
Regardez l'exemple suivant:
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>UPDATE FOR JQUERY 3.x:
Avec jQuery 3, le comportement décrit va changer! Les éléments seront considérés comme visibles s'ils ont des zones de mise en page, y compris celles de largeur et/ou hauteur zéro.
JSFiddle avec jQuery 3.0.0-alpha1:
Le même JS aura alors cette sortie:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
Cela peut fonctionner:
expect($("#message_div").css("display")).toBe("none");
Exemple:
$(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>Pour vérifier si ce n'est pas visible, j'utilise !:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Vous pouvez également enregistrer le sélecteur jQuery dans une variable afin d’améliorer les performances lorsque vous en avez besoin plusieurs fois:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Utilisez la commutation de classe, pas la modification de style. . .
L'utilisation de classes désignées pour "masquer" des éléments est simple et constitue l'une des méthodes les plus efficaces. Le fait de basculer une classe "masquée" avec un style Display de "néant" fonctionnera plus rapidement que la modification directe de ce style. J'ai expliqué une partie de cela en détail dans la question Stack Overflow Tourner deux éléments visibles/cachés dans le même div _.
Meilleures pratiques et optimisation de JavaScript
Voici une vidéo vraiment enrichissante d'un Google Tech Talk de Nicholas Zakas, ingénieur front-end de Google:
- Accélérez votre Javascript (YouTube)
Exemple d’utilisation de visible check for adblocker est activé:
$(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" est un identifiant bloqué par adblocker. En vérifiant si elle est visible, vous pouvez détecter si adblocker est activé.
Après tout, aucun exemple ne me convient, alors j'ai écrit le mien.
Tests (pas de support d'Internet Explorer filter:alpha):
a) Vérifier si le document n'est pas caché
b) Vérifier si un élément a zéro largeur/hauteur/opacité ou display:nonevisibility:hidden dans les styles en ligne
c) Vérifiez si le centre (également parce qu'il est plus rapide que de tester chaque pixel/coin) de l'élément n'est pas caché par un autre élément (et tous les ancêtres, par exemple: overflow:hidden/scroll/un élément sur un autre) ou les bords de l'écran
d) Vérifier si un élément a zéro largeur/hauteur/opacité ou display:none/visibilité: caché dans les styles calculés (parmi tous les ancêtres)
_/Testé sur
Android 4.4 (navigateur natif/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (Modes de document d'Internet Explorer 5-11 + Internet) Explorer 8 sur une machine virtuelle), 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;
}
})();
Comment utiliser:
is_visible(elem) // boolean
Vous devez vérifier les deux ... Affichage ainsi que la visibilité:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Si nous vérifions $(this).is(":visible"), jQuery vérifie automatiquement les deux choses.
Peut-être que vous pouvez faire quelque chose comme ça
$(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>Parce que Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (comme décrit pour jQuery: visible Selector ) - nous pouvons vérifier si l’élément est vraiment visible de cette manière:
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;
}
});
Vérifiez simplement la visibilité en recherchant une valeur booléenne, telle que:
if (this.hidden === false) {
// Your code
}
J'ai utilisé ce code pour chaque fonction. Sinon, vous pouvez utiliser is(':visible') pour vérifier la visibilité d'un élément.
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
Mais que se passe-t-il si le CSS de l'élément est comme suit?
.element{
position: absolute;left:-9999;
}
So cette réponse à la question de débordement de pile Comment vérifier si un élément est hors écran doit également être prise en compte.
Voici également une expression conditionnelle ternaire permettant de vérifier l'état de l'élément, puis de l'activer:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
Une fonction peut être créée afin de vérifier la visibilité/les attributs d'affichage afin de déterminer si l'élément est affiché ou non dans l'interface utilisateur.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
.is(":not(':hidden')") /*if shown*/
J'ai cherché cela, et aucune des réponses n'est correcte pour mon cas, alors j'ai créé une fonction qui retournera faux si ses yeux ne peuvent pas voir l'élément
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;
}
}
});
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
Voici comment jQuery résout ce problème en interne:
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
Si vous n'utilisez pas jQuery, vous pouvez simplement exploiter ce code et le transformer en votre propre fonction:
function isVisible(elem) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
Quelle isVisible retournera true tant que l'élément est visible.
Il suffit simplement de vérifier si cet élément est visible et il retournera un boolean , jQuery masque les éléments en ajoutant aucun affichage à l’élément. Ainsi, si vous voulez utiliser du JavaScript pur, vous pouvez toujours le faire, par exemple:
if (document.getElementById("element").style.display === 'block') {
// your element is visible, do whatever you'd like
}
En outre, vous pouvez utiliser jQuery comme cela semble être le reste de votre code et vous avez un bloc de code plus petit, comme dans la suite de jQuery, faites la même piste pour vous:
if ($(element).is(":visible")) {
// your element is visible, do whatever you'd like
};
L'utilisation de la méthode css dans jQuery peut également entraîner la même chose:
if ($(element).css('display')==='block') {
// your element is visible, do whatever you'd like
}
Également en cas de vérification de la visibilité et de l'affichage, vous pouvez procéder comme suit:
if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
// your element is visible, do whatever you'd like
}
Il y a plusieurs façons de vérifier si un élément est visible ou caché dans jQuery.
HTML de démonstration par exemple
<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>
Utiliser le sélecteur de filtre de visibilité $('element:hidden') ou $('element:visible')
$('element:hidden'): sélectionne tous les éléments masqués.Example: $('#content2:hidden').show();$('element:visible'): sélectionne tous les éléments visibles.Example: $('#content:visible').css('color', '#EEE');
Pour en savoir plus, consultez http://api.jquery.com/category/selectors/visibility-filter-selectors/
Utiliser is() Filtrage
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}
En savoir plus sur http://api.jquery.com/is/
En tant que hide(), show() et toggle() attache un css en ligne (display: none ou display: block) à element . De même, nous pouvons facilement utiliser l'opérateur ternaire pour vérifier si l'élément météo est caché ou visible en vérifiant display css.
METTRE À JOUR:
- Vous devez également vérifier si l'élément css est défini sur visibilité: "visible" ou visibilité: "masqué"
- L'élément sera également visible si la propriété display est définie sur inline-block, block, flex.
Nous pouvons donc vérifier la propriété de l'élément qui le rend invisible. Donc, ils sont display: none et visibility: "hidden";
Nous pouvons créer un objet pour vérifier la propriété responsable de masquer l'élément:
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
Nous pouvons vérifier en parcourant chaque valeur de clé dans la correspondance d’objets si la propriété d’élément pour les correspondances de clé avec la valeur de propriété cachée.
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
Si vous souhaitez vérifier des propriétés telles que la hauteur d'élément: 0 ou la largeur: 0 ou plus, vous pouvez étendre cet objet, y ajouter une propriété et la vérifier.
Merci @Krzysztof Przygoda de me rappeler d’autres propriétés d’affichage.
Vous pouvez utiliser ceci:
$(element).is(':visible');
Exemple de code
$(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>Ceci est une option pour vérifier que la balise est visible ou non
// 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
// }; Je veux juste préciser que, dans jQuery,
Les éléments peuvent être considérés comme cachés pour plusieurs raisons:
- Ils ont une valeur d'affichage CSS de none.
- Ce sont des éléments de formulaire avec type = "hidden".
- Leur largeur et leur hauteur sont explicitement définies sur 0.
- Un élément ancêtre est masqué, ainsi l'élément n'est pas affiché sur la page.
Les éléments avec visibilité: caché ou opacité: 0 sont considérés comme visibles, car ils occupent toujours de l'espace dans la présentation. Lors d'animations masquant un élément, celui-ci est considéré comme visible jusqu'à la fin de l'animation.
if($('.element').is(':hidden')) {
// Do something
}
Vous pouvez simplement ajouter une classe quand elle est visible. Ajouter une classe, show. Ensuite, vérifiez qu'il a une classe:
$('#elementId').hasClass('show');
Il retourne vrai si vous avez la classe show.
Ajouter des CSS comme ceci:
.show{ display: block; }
Il y a trop de méthodes pour vérifier les éléments cachés. C'est le meilleur choix (je viens de vous recommander):
Avec jQuery, créez un élément "display: none" en CSS pour hidden.
Le point est:
$('element:visible')
Et un exemple d'utilisation:
$('element:visible').show();
Il suffit de vérifier l'attribut display (ou visibility en fonction du type d'invisibilité que vous préférez). Exemple :
if ($('#invisible').css('display') == 'none') {
// This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
Vous pouvez utiliser le
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
Documentation API: https://api.jquery.com/visible-selector/
1 • solution jQuery
Méthodes permettant de déterminer si un élément est visible dans JQuery
<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>
Boucle sur tous les enfants visibles div de l'élément id 'myelement':
$("#myelement div:visible").each( function() {
//Do something
});
Coup d'oeil à la source de jQuery
Voici comment jQuery implémente cette fonctionnalité:
jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
2 • Comment vérifier si un élément est hors écran - CSS
En utilisant Element.getBoundingClientRect (), vous pouvez facilement détecter si votre élément se trouve ou non dans les limites de votre fenêtre de visualisation (à savoir à l'écran ou à l'écran):
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)
);
};
Vous pouvez ensuite l'utiliser de plusieurs manières:
// returns all elements that are offscreen
$(':offscreen');
// boolean returned if element is offscreen
$('div').is(':offscreen');
Si vous utilisez Angular, vérifiez: N'utilisez pas d'attribut caché avec Angular
if($("h1").is(":hidden")){
// your code..
}
Vous pouvez utiliser la fonction jQuery is() pour vérifier si l'élément sélectionné est visible ou masqué. Cette méthode parcourt les éléments DOM pour trouver une correspondance, qui satisfait le paramètre transmis. Il retournera true s'il y a correspondance, sinon false.
<script>
($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
Au lieu d'écrire une event pour chaque element unique, procédez comme suit:
$('div').each(function(){
if($(this).css('display') === 'none'){
$(this).css({'display':'block'});
}
});
Aussi, vous pouvez l'utiliser sur les entrées:
$('input').each(function(){
if($(this).attr('type') === 'hidden'){
$(this).attr('type', 'text');
}
});
Essayer
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>Tu peux le faire:
isHidden = function(element){
return (element.style.display === "none");
};
if(isHidden($("element")) == true){
// something
}
solution jQuery, question assez ancienne, mais je suis quand même tombée. Je peux donner une meilleure réponse pour ceux qui veulent changer le texte du bouton.
$(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>$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
Pour être juste, la question est antérieure à cette réponse. Je l'ajoute non pas pour critiquer le PO mais pour aider quiconque pose encore cette question.
La manière correcte de déterminer si quelque chose est visible est de consulter votre modèle de vue. Si vous ne savez pas ce que cela signifie, vous êtes sur le point de partir pour un voyage de découverte qui rendra votre travail beaucoup moins difficile.
Voici un aperçu de l’architecture (/ MVVM) model-view-viewmodel .
KnockoutJS est une bibliothèque de liaisons qui vous permettra d’essayer ces choses sans apprendre tout un framework.
Et voici quelques JS et une DIV qui peuvent ou peuvent ne pas être visibles.
<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>
Notez que la fonction bascule ne consulte pas le DOM pour déterminer la visibilité de la div, elle consulte le modèle de vue.