Pour un site Web que je suis en train de réaliser, je veux charger une division et en cacher une autre, puis disposer de deux boutons qui permettent de passer d'une division à l'autre en utilisant JavaScript.
**Voici mon code actuel
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function replaceContentInOtherContainer(replace_target, source) {
document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
<html>
<button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button>
<div>
<span id="target">div1</span>
</div>
<div style="display:none">
<span id="replace_target">div2</span>
</div>
La deuxième fonction qui remplace div2 ne fonctionne pas, mais la première fonctionne.
Pour afficher ou masquer un élément, manipulez la [propriété style][1] de l'élément. Dans la plupart des cas, vous souhaitez simplement modifier la propriété [display
] [2] de l'élément :
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Si vous souhaitez que l'élément continue à occuper de l'espace (par exemple, si vous souhaitez masquer une cellule de tableau), vous pouvez modifier la propriété [visibilité
][3] de l'élément :
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Si vous voulez cacher une collection d'éléments, il suffit d'itérer sur chaque élément et de changer son display
en 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>
La plupart du temps, vous allez probablement alterner entre display : none
et display : block
, ce qui signifie que ce qui suit peut être suffisant pour afficher une collection d'éléments.
Vous pouvez optionnellement spécifier l'affichage désiré en tant que second argument si vous ne voulez pas que la valeur par défaut soit 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" />
Alternativement, une meilleure approche pour afficher le(s) élément(s) serait de simplement supprimer le style display
en ligne afin de revenir à son état initial. Vérifiez ensuite le style display
calculé de l'élément afin de déterminer s'il est masqué par une règle en cascade. Si c'est le cas, affichez l'élément.
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>
(Si vous voulez aller plus loin, vous pouvez même imiter ce que fait jQuery et déterminer le style par défaut de l'élément dans le navigateur en ajoutant l'élément à une iframe
vide (sans feuille de style conflictuelle), puis récupérer le style calculé. Ce faisant, vous connaîtrez la véritable valeur initiale de la propriété display
de l'élément et vous n'aurez pas à coder en dur une valeur afin d'obtenir les résultats souhaités).
De même, si vous souhaitez basculer l'affichage d'un élément ou d'une collection d'éléments, vous pouvez simplement itérer sur chaque élément et déterminer s'il est visible en vérifiant la valeur calculée de la propriété display
. S'il est visible, définissez la propriété display
sur none
, sinon supprimez le style display
en ligne, et s'il est toujours caché, définissez la propriété display
sur la valeur spécifiée ou sur la valeur par défaut codée en dur, 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>
[1] : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style [2] : https://developer.mozilla.org/en-US/docs/Web/CSS/display [3] : https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
Utilisation du style :
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
L'utilisation d'un gestionnaire d'événements en JavaScript est préférable à l'attribut onclick=""
en HTML :
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript :
<script type="text/javascript">
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute('class', 'hidden');
portfolioDiv.setAttribute('class', 'visible');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute('class', 'hidden');
resultsDiv.setAttribute('class', 'visible');
};
</script>
[jQuery][1] peut vous aider à manipuler facilement les éléments du DOM !
[1] : http://jquery.com/