Jak pokazać lub ukryć element:
Aby wyświetlić lub ukryć element, manipuluj jego właściwością stylu . W większości przypadków, to prawdopodobnie po prostu chcesz zmienić elementu display
własności :
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Ewentualnie, jeśli nadal chcesz elementu do zajmowania miejsca (jak gdybyś ukryć komórkę tabeli), można zmienić tego elementu visibility
własność zamiast:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Ukrywanie kolekcji elementów:
Jeśli chcesz ukryć kolekcję elementów, po prostu iteruj każdy element i zmień jego elementy display
na none
:
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>
Pokazuje kolekcję elementów:
Przez większość czasu będziesz prawdopodobnie po prostu przełączać się między display: none
i display: block
, co oznacza, że następujące elementy mogą wystarczyć podczas wyświetlania kolekcji elementów.
Możesz opcjonalnie podać żądany display
argument jako drugi argument, jeśli nie chcesz, aby był ustawiony domyślnie block
.
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
Alternatywnie, lepszym podejściem do pokazania elementu (elementów) byłoby po prostu usunięcie display
stylizacji wbudowanej w celu przywrócenia jej z powrotem do stanu początkowego. Następnie sprawdź obliczony display
styl elementu, aby ustalić, czy jest on ukrywany przez regułę kaskadową. Jeśli tak, to pokaż element.
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
(Jeśli chcesz pójść o krok dalej, możesz nawet naśladować to, co robi jQuery i określić domyślny styl przeglądarki elementu, dodając element do pustego iframe
(bez sprzecznego arkusza stylów), a następnie odzyskując obliczone style. W ten sposób możesz pozna prawdziwą display
wartość początkową właściwości elementu i nie będzie konieczne kodowanie wartości w celu uzyskania pożądanych wyników).
Przełączanie wyświetlacza:
Podobnie, jeśli chcesz przełączać display
element lub kolekcję elementów, możesz po prostu iterować każdy element i ustalić, czy jest on widoczny, sprawdzając obliczoną wartość display
właściwości. Jeśli jest to widoczne, należy ustawić display
się none
, w przeciwnym razie usuń inline display
stylizacji, a jeśli to jeszcze ukryte, ustawić display
podanej wartości lub zakodowanego na stałe domyślnie block
.
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>
Możesz po prostu manipulować stylem tego diva ...
źródło
Możesz ukryć / pokazać Div używając funkcji Js. próbka poniżej
HTML -
źródło
Korzystanie ze stylu:
Korzystanie z procedury obsługi zdarzeń w JavaScript jest lepsze niż
onclick=""
atrybut w HTML:JavaScript:
jQuery może pomóc w łatwym manipulowaniu elementami DOM!
źródło
hidden
atrybutu HTML5Uważam, że ten prosty kod JavaScript jest bardzo przydatny!
źródło
Ustaw swój HTML jako
A teraz ustaw javascript na
źródło
źródło
Po prostu Ustaw atrybut stylu identyfikatora:
Aby pokazać ukryty div
Aby ukryć pokazany div
źródło
I odpowiedź Purescript, dla osób używających Halogen:
Jeśli „skontrolujesz element”, zobaczysz coś takiego:
ale zgodnie z oczekiwaniami nic nie będzie wyświetlane na ekranie.
źródło
Wystarczy prosta funkcja Należy zaimplementować Pokaż / ukryj „div” za pomocą JavaScript
źródło
Znalazłem to pytanie, a ostatnio wdrażałem niektóre interfejsy użytkownika za pomocą Vue.js, więc może to być dobra alternatywa.
Po pierwsze, twój kod nie ukrywa się
target
po kliknięciu Wyświetl profil. Przesłaniasz treść zatarget
pomocądiv2
.źródło
Możesz to łatwo osiągnąć za pomocą jQuery .toggle () .
źródło