Visa/dölj 'div' med JavaScript

Question

Mer

Question

Visa/dölj 'div' med JavaScript

På en webbplats som jag håller på att göra vill jag ladda en div och dölja en annan, och sedan ha två knappar som växlar mellan div:erna med hjälp av JavaScript.

Detta är min nuvarande kod

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>

Den andra funktionen som ersätter div2 fungerar inte, men den första fungerar.

Teocci

Redigerad fråga 2019ör januari 2019 в 7:46

Programmering

javascript

html

onclick

Hur du visar eller döljer ett element:

För att visa eller dölja ett element manipulerar du elementets stilegenskap. I de flesta fall vill du förmodligen bara ändra elementets display-egenskap:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Om du fortfarande vill att elementet ska ta plats (som om du vill dölja en tabellcell) kan du ändra elementets visibility-egenskap i stället:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Hölja en samling element:

Om du vill dölja en samling element är det bara att iterera över varje element och ändra elementets display till 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>

Visa en samling element:

För det mesta kommer du förmodligen bara att växla mellan display: none och display: block, vilket innebär att följande kan vara tillräckligt när du visar en samling element.

Du kan eventuellt ange önskad display som andra argument om du inte vill att det ska vara block som standard.

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" />

Alternativt skulle en bättre metod för att visa elementet/elementen vara att bara ta bort inline-formatet display för att återställa det till sitt ursprungliga tillstånd. Kontrollera sedan den beräknade display-stilen för elementet för att avgöra om det döljs av en kaskadregel. Om så är fallet, visa elementet.

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>

(Om du vill ta det ett steg längre kan du till och med efterlikna vad jQuery gör och bestämma elementets standardformat genom att lägga till elementet i en tom iframe (utan ett konfliktfyllt formatmallblad) och sedan hämta det beräknade formatet. På så sätt får du reda på elementets sanna ursprungliga värde för egenskapen display och du behöver inte hårdkoda ett värde för att få önskat resultat).

Växla visningen:

På samma sätt, om du vill växla display för ett element eller en samling element, kan du helt enkelt iterera över varje element och avgöra om det är synligt genom att kontrollera det beräknade värdet av display-egenskapen. Om det är synligt, sätt display till none, annars tar du bort inline-formatet display, och om det fortfarande är dolt, sätter du display till det angivna värdet eller det hårdkodade standardvärdet, 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>