Äquivalent zu jQuery .hide() zum Einstellen der Sichtbarkeit: hidden

Question

In jQuery gibt es .hide() et .show() Methoden, die das CSS einstellen display: none Umgebung.

Gibt es eine gleichwertige Funktion, die die visibility: hidden Einstellung?

Ich weiß, ich kann die .css() aber ich bevorzuge eine Funktion wie .hide() oder so. Danke.

Answer 1

Reines JS Äquivalent für jQuery hide()/show() :

function hide(el) {
    el.style.visibility = 'hidden';    
    return el;
}

function show(el) {
    el.style.visibility = 'visible';    
    return el;
}

hide(document.querySelector(".test"));
// hide($('.test')[0])   // usage with jQuery

Wir verwenden return el wegen der Erfüllung flüssige Schnittstelle "Entwurfsmuster".

Hier ist Arbeitsbeispiel .

---

Nachstehend finden Sie außerdem ÜBERHAUPT nicht empfehlenswert Alternative, die aber wohl eher eine "fragestellungsnahe" Antwort ist:

HTMLElement.prototype.hide = function() {
    this.style.visibility = 'hidden';  
    return this;
}

HTMLElement.prototype.show = function() {
    this.style.visibility = 'visible';  
    return this;
}

document.querySelector(".test1").hide();
// $('.test1')[0].hide();   // usage with jQuery

Natürlich implementiert dies nicht jQuery 'each' (gegeben in @JamesAllardice Antwort), weil wir hier reine js verwenden.

Arbeitsbeispiel ist aquí .