Czy możesz zrobić coś takiego
function showDiv()
{
[DIV].visible = true;
//or something
}
test.hide()
?
.hide()
nie ustawia widoczności. Ustawia wyświetlanie.
display
do pokazania elementu.
Czy możesz zrobić coś takiego
function showDiv()
{
[DIV].visible = true;
//or something
}
test.hide()
?
.hide()
nie ustawia widoczności. Ustawia wyświetlanie.
display
do pokazania elementu.
Odpowiedzi:
jeśli [DIV] jest elementem to
[DIV].style.visibility='visible'
LUB
[DIV].style.visibility='hidden'
visibility
ma ten efekt uboczny, że miejsce zajmowane przez element pozostaje zarezerwowane. To może, ale nie musi, być tym, czego chce PO
document.getElementById('id-of-the-div')
zamiast[DIV]
Załóżmy, że nie używasz biblioteki, takiej jak jQuery.
Jeśli nie masz jeszcze odniesienia do elementu DOM, zdobądź go za pomocą var elem = document.getElementById('id');
Następnie możesz ustawić dowolną właściwość CSS tego elementu. Aby pokazać / ukryć, możesz użyć dwóch właściwości: display
i visibility
, które mają nieco inne efekty:
Dopasowanie style.display
będzie wyglądać tak, jakby element w ogóle nie był obecny („usunięty”).
elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)
lub style.visibility
faktycznie sprawi, że element div nadal tam będzie, ale będzie „wszystkie puste” lub „wszystkie białe”
elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';
Jeśli korzystasz z jQuery, możesz to zrobić jeszcze łatwiej, o ile chcesz ustawić display
właściwość:
$(elem).hide();
$(elem).show();
Automatycznie użyje odpowiedniej display
wartości; nie musisz przejmować się typem elementu (inline lub block). Dodatkowo, elem
nie może być tylko elementem DOM ale również selektor takich jak #id
lub .class
czy cokolwiek innego, co jest ważne CSS3 (i więcej!).
Możesz użyć visibility
lub, display
ale musisz wprowadzić zmiany do div.style
obiektu, a nie do div
samego obiektu.
var div = document.getElementById('div_id');
// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';
// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';
div.style.visibility = false
nie działa u mnie w Chrome. A true
część wydaje się działać bardziej przypadkowo, ponieważ odblokowuje nieruchomość (chociaż nie mój negatywny głos)
display
nie visibility
są to właściwości logiczne. Poza tym none
i block
należy je cytować, ponieważ są to ciągi znaków ...
Możesz użyć funkcji DOM: setAttribute i removeAttribute. W poniższym linku masz przykład, jak ich używać.
Funkcje setAttribute i removeAttribute
Szybki podgląd:
hide: document.getElementById("myDiv").setAttribute("hidden","");
unhide: document.getElementById("myDiv").removeAttribute("hidden");
Możesz użyć tego, opacity
co jest podobne do, visibility
ale pozwala na płynne przejście i kontrolowanie innych parametrów, takich jak wysokość (dla uproszczenia fragmentu kodu umieszczam logikę js bezpośrednio w html - nie rób tego w kodzie produkcyjnym)
Użyj atrybutu „hidden” elementu DOM:
function showDiv(isVisible)
{
[DIV].hidden = !isVisible;
}
Uczyń niewidzialnym za pomocą CSS
#div_id {
/*height: 400px;*/
visibility:hidden;
}
Uczyń widocznym za pomocą JavaScript
document.getElementById('div_id').style.visibility = 'visible';