Come mostrare o nascondere un elemento:
Per mostrare o nascondere un elemento, manipola la proprietà di stile dell'elemento . Nella maggior parte dei casi, probabilmente vuoi solo cambiare la displayproprietà dell'elemento :
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
In alternativa, se desideri che l'elemento occupi spazio (come se nascondessi una cella di tabella), puoi invece modificare la visibilityproprietà dell'elemento :
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Nascondere una raccolta di elementi:
Se vuoi nascondere una raccolta di elementi, basta scorrere su ciascun elemento e cambiare l'elemento displayin 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>
Mostra una raccolta di elementi:
Il più delle volte, probabilmente si alternerà tra display: nonee display: block, il che significa che quanto segue può essere sufficiente quando si mostra una raccolta di elementi.
Se lo si desidera, è possibile specificare l'opzione desiderata displaycome secondo argomento 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" />
In alternativa, un approccio migliore per mostrare gli elementi sarebbe semplicemente rimuovere lo displaystile in linea al fine di riportarlo al suo stato iniziale. Quindi controlla lo displaystile calcolato dell'elemento per determinare se viene nascosto da una regola a cascata. In tal caso, mostra l'elemento.
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>
(Se vuoi fare un ulteriore passo in avanti, potresti persino imitare ciò che fa jQuery e determinare lo stile predefinito del browser dell'elemento aggiungendo l'elemento a uno spazio vuoto iframe(senza un foglio di stile in conflitto) e quindi recuperare lo stile calcolato. conoscerà il vero displayvalore della proprietà iniziale dell'elemento e non sarà necessario codificare un valore per ottenere i risultati desiderati.)
Attivazione / disattivazione del display:
Allo stesso modo, se si desidera attivare / disattivare l' displayelemento di un elemento o una raccolta di elementi, è possibile semplicemente scorrere su ciascun elemento e determinare se è visibile controllando il valore calcolato della displayproprietà. Se è visibile, impostare la displaya none, in caso contrario togliere la linea displaystyling, e se è ancora nascosto, impostare il displaysul valore specificato o quello predefinito hardcoded, 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>