Is het mogelijk om de zichtbaarheid van een element te wijzigen met behulp van de functies .hide()
, .show()
of .toggle()
?
Hoe zou je testen of een element visible
of hidden
is?
Antwoord 1, autoriteit 100%
Aangezien de vraag betrekking heeft op een enkel element, is deze code wellicht geschikter:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
Het is hetzelfde als twernt’s suggestie, maar toegepast op een enkel element; en het komt overeen met het aanbevolen algoritme in de jQuery FAQ.
We gebruiken jQuery’s is()om het geselecteerde element te controleren met een ander element, selector of een jQuery-object. Deze methode doorloopt de DOM-elementen om een overeenkomst te vinden die voldoet aan de doorgegeven parameter. Het zal true retourneren als er een overeenkomst is, anders false.
Antwoord 2, autoriteit 16%
Je kunt de hidden
-selector gebruiken:
// Matches all elements that are hidden
$('element:hidden')
En de visible
selector:
// Matches all elements that are visible
$('element:visible')
Antwoord 3, autoriteit 10%
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// 'element' is hidden
}
De bovenstaande methode houdt geen rekening met de zichtbaarheid van de ouder. Om ook de ouder te beschouwen, moet u .is(":hidden")
of .is(":visible")
gebruiken.
Bijvoorbeeld
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
De bovenstaande methode beschouwt
div2
als zichtbaar, terwijl:visible
niet. Maar het bovenstaande kan in veel gevallen nuttig zijn, vooral wanneer u moet zoeken of er fouten zichtbaar zijn in de verborgen ouder, omdat in dergelijke omstandigheden:visible
niet zal werken.
Antwoord 4, autoriteit 6%
Geen van deze antwoorden gaat in op wat volgens mij de vraag is, waarnaar ik op zoek was, “Hoe ga ik om met items die visibility: hidden
hebben?”. Noch :visible
noch :hidden
kan dit aan, aangezien ze beide zoeken naar weergave volgens de documentatie. Voor zover ik kon bepalen, is er geen selector om CSS-zichtbaarheid te verwerken. Hier is hoe ik het heb opgelost (standaard jQuery-selectors, er kan een meer beknopte syntaxis zijn):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
Antwoord 5, autoriteit 4%
Van Hoe bepaal ik de status van een omgeschakeld element?
Je kunt bepalen of een element is samengevouwen of niet door de :visible
en :hidden
selectors te gebruiken.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Als je gewoon handelt naar een element op basis van zijn zichtbaarheid, kun je gewoon :visible
of :hidden
opnemen in de selector-expressie. Bijvoorbeeld:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
Antwoord 6, autoriteit 3%
Vaak ga je bij het controleren of iets zichtbaar is of niet, meteen door en ga je er iets anders mee doen. jQuery-ketens maken dit gemakkelijk.
Dus als je een selector hebt en je wilt er alleen een actie op uitvoeren als deze zichtbaar of verborgen is, kun je filter(":visible")
of filter(":hidden")
gevolgd door deze te koppelen aan de actie die u wilt ondernemen.
Dus in plaats van een if
-statement, zoals dit:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
Of efficiënter, maar nog lelijker:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
Je kunt het allemaal in één regel doen:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Antwoord 7, autoriteit 3%
De :visible
selector volgens de jQuery-documentatie:
- Ze hebben een CSS
display
waarde vannone
.- Het zijn formulierelementen met
type="hidden"
.- Hun breedte en hoogte zijn expliciet ingesteld op 0.
- Een voorouderelement is verborgen, dus het element wordt niet weergegeven op de pagina.
Elementen met
visibility: hidden
ofopacity: 0
worden als zichtbaar beschouwd, aangezien ze nog steeds ruimte innemen in de lay-out.
Dit is in sommige gevallen handig en in andere nutteloos, want als je wilt controleren of het element zichtbaar is (display != none
), waarbij je de zichtbaarheid van de ouders negeert, zul je merken dat .css("display") == 'none'
is niet alleen sneller, maar geeft ook de zichtbaarheidscontrole correct terug.
Als je de zichtbaarheid wilt controleren in plaats van de weergave, gebruik dan: .css("visibility") == "hidden"
.
Houd ook rekening met de aanvullende jQuery-opmerkingen:
Omdat
:visible
een jQuery-extensie is en geen deel uitmaakt van de CSS-specificatie, kunnen query’s met:visible
niet profiteren van de prestatieverbetering die wordt geboden door de native DOMquerySelectorAll()
methode. Om de beste prestaties te bereiken wanneer u:visible
gebruikt om elementen te selecteren, selecteert u eerst de elementen met een pure CSS-selector en gebruikt u vervolgens.filter(":visible")
.
Als u zich zorgen maakt over de prestaties, moet u ook Nu zie je me… show/hide performance(2010-05-04). En gebruik andere methoden om elementen te tonen en te verbergen.
Antwoord 8, autoriteit 2%
Hoe zichtbaarheid van elementen en jQuery werken;
Een element kan worden verborgen met display:none
, visibility:hidden
of opacity:0
. Het verschil tussen deze methoden:
display:none
verbergt het element en het neemt geen ruimte in beslag;visibility:hidden
verbergt het element, maar neemt nog steeds ruimte in beslag in de lay-out;-
opacity:0
verbergt het element als “visibility:hidden”, en het neemt nog steeds ruimte in beslag in de lay-out; het enige verschil is dat de dekking het mogelijk maakt om een element gedeeltelijk transparant te maken;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: "" }); }
Handige jQuery-wisselmethoden:
$('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); });
Antwoord 9, autoriteit 2%
Dit werkt voor mij, en ik gebruik show()
en hide()
om mijn div verborgen/zichtbaar te maken:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
Antwoord 10, autoriteit 2%
U kunt dit ook doen met gewoon JavaScript:
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;
}
Opmerkingen:
-
Werkt overal
-
Werkt voor geneste elementen
-
Werkt voor CSS en inline-stijlen
-
Vereist geen raamwerk
Antwoord 11, autoriteit 2%
Ik zou CSS-klasse .hide { display: none!important; }
.
Voor verbergen/weergeven noem ik .addClass("hide")/.removeClass("hide")
. Voor het controleren van de zichtbaarheid gebruik ik .hasClass("hide")
.
Het is een eenvoudige en duidelijke manier om elementen te controleren/verbergen/weergeven, als u niet van plan bent om de methoden .toggle()
of .animate()
te gebruiken.
Antwoord 12
Je kunt eenvoudig het kenmerk hidden
of visible
gebruiken, zoals:
$('element:hidden')
$('element:visible')
Of je kunt hetzelfde vereenvoudigen met isals volgt.
$(element).is(":visible")
Antwoord 13
ebdiv
moet worden ingesteld op style="display:none;"
. Het werkt voor zowel tonen als verbergen:
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
Antwoord 14
Een ander antwoord waarmee u rekening moet houden, is dat als u een element verbergt, u jQuery, maar in plaats van het daadwerkelijk te verbergen, verwijder je het hele element, maar kopieer je de HTMLinhoud en de tag zelf in een jQuery-variabele, en dan hoef je alleen maar te testen of er zo’n tag op het scherm staat, met behulp van de normale if (!$('#thetagname').length)
.
Antwoord 15
Bij het testen van een element tegen :hidden
selector in jQuery moet er rekening mee worden gehouden dat een absoluut gepositioneerd element kan worden herkend als verborgen hoewel hun onderliggende elementen zichtbaar zijn.
Dit lijkt in de eerste plaats enigszins contra-intuïtief, hoewel een nadere blik op de jQuery-documentatie de relevante informatie geeft:
Elementen kunnen om verschillende redenen als verborgen worden beschouwd: […] Hun breedte en hoogte zijn expliciet ingesteld op 0. […]
Dus dit is eigenlijk logisch met betrekking tot het doosmodel en de berekende stijl voor het element. Zelfs als breedte en hoogte niet explicietzijn ingesteld op 0, kunnen ze implicietworden ingesteld.
Bekijk het volgende voorbeeld:
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>
Antwoord 16
Dit kan werken:
expect($("#message_div").css("display")).toBe("none");
Antwoord 17
Voorbeeld:
$(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>
Antwoord 18
Om te controleren of het niet zichtbaar is, gebruik ik !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Of het volgende is ook hetzelfde, waarbij de jQuery-selector in een variabele wordt opgeslagen voor betere prestaties wanneer u deze meerdere keren nodig hebt:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Antwoord 19
Gebruik het wisselen van klassen, niet het bewerken van stijlen. . .
Het gebruik van klassen die zijn aangewezen voor het “verbergen” van elementen is eenvoudig en ook een van de meest efficiënte methoden. Het omschakelen van een klasse ‘verborgen’ met een Display
-stijl van ‘none’ zal sneller werken dan die stijl rechtstreeks te bewerken. Ik heb een deel hiervan behoorlijk grondig uitgelegd in Stack Overflow-vraag Twee elementen zichtbaar/verborgen in dezelfde div.
Beste praktijken en optimalisatie van JavaScript
Hier is een zeer verhelderende video van een Google Tech Talk door Google front-end engineer Nicholas Zakas:
- Versnel uw Javascript(YouTube)
Antwoord 20
Voorbeeld van het gebruik van de zichtbarecontrole voor adblocker is geactiveerd:
$(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>
Antwoord 21
Tenslotte past geen van de voorbeelden bij mij, dus schreef ik mijn eigen.
Tests(geen ondersteuning voor Internet Explorer filter:alpha
):
a) Controleer of het document niet verborgen is
b) Controleer of een element nul breedte / hoogte / dekking heeft of display:none
/ visibility:hidden
in inline stijlen
c) Controleer of het midden (ook omdat het sneller is dan het testen van elke pixel / hoek) van het element niet wordt verborgen door een ander element (en alle voorouders, bijvoorbeeld: overflow:hidden
/ scroll / het ene element over het andere) of schermranden
d) Controleer of een element nul breedte / hoogte / dekking heeft of display:none
/ zichtbaarheid:verborgen in berekende stijlen (tussen alle voorouders)
Getest op
Android 4.4 (native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac WebKit), Internet Explorer (Internet Explorer 5-11 documentmodi + Internet Explorer 8 op een virtuele machine) en 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;
}
})();
Hoe te gebruiken:
is_visible(elem) // boolean
Antwoord 22
U moet zowel … weergeven en zichtbaar:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Als we controleren op $(this).is(":visible")
, jQuery controleert op beide dingen automatisch.
23
Misschien kun je zoiets doen
$(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>
24
Controleer eenvoudigweg het zicht door te controleren op een Booleaanse waarde, zoals:
if (this.hidden === false) {
// Your code
}
Ik heb deze code voor elke functie gebruikt. Anders kunt u is(':visible')
voor het controleren van de zichtbaarheid van een element.
25
Omdat Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout
(zoals beschreven voor JQuery: zichtbare selector ) – We kunnen controleren of element echt op deze manier zichtbaar is:
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;
}
});
26
Maar wat als de CSS van het element is als het volgende?
.element{
position: absolute;left:-9999;
}
dus Dit antwoord op stapeloverloopvraag Hoe te controleren of een element off-screen is ook worden overwogen.
27
Er kan een functie worden gemaakt om te controleren op zichtbaarheid / display-kenmerken om te peilen of het element in de UI wordt getoond of niet.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
28
Ook hier is een ternaire voorwaardelijke uitdrukking om de status van het element te controleren en vervolgens om het te schakelen:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
29
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}