Jak skrýt a zobrazit prvky DOM pomocí JavaScriptu

Existuje několik způsobů, jak zobrazit nebo skrýt prvky DOM ve vanilla JavaScript. V tomto článku se podíváme na dva různé způsoby, jak skrýt nebo zobrazit prvky DOM pomocí JavaScriptu.

Použití stylu display Vlastnost

Styl display vlastnost se používá k nastavení i získání typu zobrazení prvku v JavaScriptu.

Většina prvků HTML má inline nebo zablokovat typ displeje. Obsah vloženého prvku plave na jeho levou a pravou stranu. Blokové prvky HTML se liší, protože * vyplňují* celý řádek a nezobrazují obsah po stranách.

Chcete-li prvek skrýt, nastavte display vlastnost na none :

document.querySelector('.btn').style.display = 'none';

Chcete-li zobrazit prvek, nastavte display vlastnost na block (nebo jakákoli jiná hodnota kromě none ):

document.querySelector('.btn').style.display = 'block';

Použití stylu visibility Vlastnost

Dalším způsobem, jak zobrazit nebo skrýt prvky DOM v JavaScriptu, je použití stylu visibility vlastnictví. Je podobný výše uvedenému display vlastnictví. Pokud však nastavíte display: none , skryje celý prvek z DOM, zatímco visibility:hidden skryje obsah prvku, ale prvek zůstane ve své původní poloze a velikosti.

Chcete-li prvek skrýt, nastavte visibility vlastnost na hidden :

document.querySelector('.btn').style.visibility = 'hidden';

Chcete-li prvek znovu zobrazit, jednoduše nastavte visibility vlastnost na visible jako níže:

document.querySelector('.btn').style.visibility = 'visible';

Styl visibility vlastnost pouze skryje prvek, ale neodstraní prostor obsazený prvkem. Pokud chcete odstranit i mezeru, musíte nastavit display: none pomocí display vlastnost.

Vytváření show() a hide() Metody

jQuery poskytuje hide() , show() a toggle() pomocné metody, které k aktualizaci display používají vložené styly vlastnost prvku.

Použijme style vlastnost k vytvoření výše uvedených metod jQuery ve vanilla JavaScript:

// hide an element
const hide = (elem) => {
    elem.style.display = 'none';
}

// show an element
const show = (elem) => {
    elem.style.display = 'block';
}

// toggle the element visibility
const toggle = (elem) => {
    
    // if the element is visible, hide it
    if(window.getComputedStyle(elem).display !== 'none') {
        hide(elem);
        return;
    }

    // show the element
    show(elem);
}

Chcete-li nyní skrýt nebo zobrazit jakýkoli prvek DOM, stačí použít výše uvedené metody jako níže:

// hide element
hide(document.querySelector('.btn'));

// show element
show(document.querySelector('.btn'));

// toggle visibility
toggle(document.querySelector('.btn'));

Všimněte si použití getComputedStyle() metoda, kterou jsme se nedávno naučili, zkontrolovat, zda je prvek již viditelný.

Tuto metodu jsme použili, protože style vlastnost pouze zabývá se inline styly specifikovanými pomocí prvku style atribut. Prvek však může být skryt prostřednictvím vloženého <style> prvek nebo dokonce externí šablonu stylů. getComputedStyle() metoda vrací skutečné styly CSS, které byly použity k vykreslení prvku HTML, bez ohledu na to, jak byly tyto styly definovány.

Další věc, které je třeba si všimnout, je getComputedStyle(elem).display !== 'none' tvrzení. Nekontrolujeme, zda je typ zobrazení block protože block není jediný způsob, jak ukázat prvek. Můžete použít flex , inline-block , grid , table atd. pro display vlastnost pro zobrazení prvku. Pro skrytí prvku však existuje pouze jedna hodnota, a to display: none .

Pokud dáváte přednost použití třídy CSS Chcete-li skrýt a zobrazit prvky DOM namísto vložených stylů, podívejte se na tuto příručku.