So zeigen Sie ein Element an oder verbergen es:
Um ein Element zu zeigen oder zu verbergen, manipulieren die Element - Stil - Eigenschaft . In den meisten Fällen möchten Sie wahrscheinlich nur die displayEigenschaft des Elements ändern :
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Wenn Sie weiterhin möchten, dass das Element Speicherplatz belegt (z. B. wenn Sie eine Tabellenzelle ausblenden), können Sie stattdessen die visibilityEigenschaft des Elements ändern :
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Eine Sammlung von Elementen ausblenden:
Wenn Sie eine Sammlung von Elementen ausblenden möchten, durchlaufen Sie einfach jedes Element und ändern Sie die Elemente 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>
Eine Sammlung von Elementen anzeigen:
Die meiste Zeit werden Sie wahrscheinlich nur zwischen display: noneund wechseln display: block, was bedeutet, dass das Folgende möglich ist ausreichend sein , wenn eine Sammlung von Elementen .
Sie können optional das gewünschte displayals zweites Argument angeben, wenn Sie nicht möchten, dass es standardmäßig verwendet wird 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" />
Alternativ wäre ein besserer Ansatz zum Anzeigen der Elemente, lediglich das Inline- displayStyling zu entfernen , um es wieder in seinen Ausgangszustand zu versetzen. Überprüfen Sie dann den berechneten displayStil des Elements, um festzustellen, ob es von einer kaskadierten Regel ausgeblendet wird. Wenn ja, zeigen Sie das 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>
(Wenn Sie noch einen Schritt weiter gehen möchten, können Sie sogar die Funktionsweise von jQuery nachahmen und das Standard-Browser-Styling des Elements bestimmen, indem Sie das Element an ein Leerzeichen anhängen iframe(ohne widersprüchliches Stylesheet) und dann das berechnete Styling abrufen wird die wahre Initiale kennendisplay Eigenschaftswert des Elements und Sie müssen keinen Wert fest codieren, um die gewünschten Ergebnisse zu erzielen.)
Anzeige umschalten:
Wenn Sie das displayElement oder eine Sammlung von Elementen umschalten möchten , können Sie einfach jedes Element durchlaufen und feststellen, ob es sichtbar ist, indem Sie den berechneten Wert der displayEigenschaft überprüfen . Wenn es sichtbar ist, setzen Sie das displayauf none, andernfalls entfernen Sie das Inline- displayStyling, und wenn es immer noch ausgeblendet ist, setzen Sie das displayauf den angegebenen Wert oder den fest codierten Standardwert 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>