wake-up-neo.net

So machen Sie ein DIV mit JavaScript sichtbar und unsichtbar

Kannst du so etwas tun?

function showDiv()
{
    [DIV].visible = true;
    //or something
}
94
user1163722

wenn [DIV] dann ein Element ist 

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden' 
114
ron tornambe

Angenommen, Sie verwenden keine Bibliothek wie jQuery.

Wenn Sie noch keinen Verweis auf das DOM-Element haben, verwenden Sie var elem = document.getElementById('id');.

Dann können Sie eine beliebige CSS-Eigenschaft dieses Elements festlegen. Zum Anzeigen/Ausblenden können Sie zwei Eigenschaften verwenden: display und visibility, die geringfügig unterschiedliche Auswirkungen haben:

Die Anpassung von style.display sieht so aus, als ob das Element überhaupt nicht vorhanden ist ("entfernt").

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

oder style.visibility macht das div eigentlich noch da, aber "alles leer" oder "alles weiß"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Wenn Sie jQuery verwenden, können Sie dies noch einfacher tun, solange Sie die display-Eigenschaft festlegen möchten:

$(elem).hide();
$(elem).show();

Der entsprechende display-Wert wird automatisch verwendet. Sie müssen sich nicht um den Elementtyp (Inline oder Block) kümmern. Außerdem kann elem nicht nur ein DOM-Element sein, sondern auch eine Auswahl wie #id oder .class oder alles andere, das gültiges CSS3 (und mehr!) Ist.

108
ThiefMaster

Sie können visibility oder display verwenden, aber Sie müssen Änderungen am div.style-Objekt und nicht am div-Objekt selbst vornehmen.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';
24
zellio

Sie können die DOM-Funktionen verwenden: setAttribute und removeAttribute . Im folgenden Link finden Sie ein Beispiel für deren Verwendung.

setAttribute- und removeAttribute-Funktionen

Ein kurzer Blick:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");
3
jarh1992

Verwenden Sie das ausgeblendete Attribut des DOM-Elements:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}
0
Andrey Hohutkin

Ihre showDiv()-Funktion kann wie folgt aussehen (ich ändere ihren Namen in universeller):

function show(element, hide = false) {
    element.style.visibility = hide ? 'hidden' : 'visible';    
}

Und verwenden Sie es folgendermaßen (der ".test" muss den CSS-Selector für Ihr DIV gültig)

let div = document.querySelector(".test");
show(div, true);

Hier ist Arbeitsbeispiel .

0