CSS Beispiel - style visibility und display none - vorteile/nachteile

Unterschied zwischen style.visibility & style.display

Zunächst möchte ich den Unterschied zwischen den beiden JavaScript Methoden style.visibility & style.display erklären.
Und dann auch das equivalent von der jQuery css() Methode hide & show beschreiben.


document.getElementById('myID').style.visibility = "visible";
document.getElementById('myID').style.display = "none";
Welche von beiden Methoden für die jeweilige Applikation besser geeignet ist,
hängt davon ab, was und wie man etwas auf der Webseite darstellen will.

Das Grundprinzip ist klar,
ich möchte eine CSS deffinition (Eigenschaft) zur Laufzeit mit JavaScript ändern.
Normalerweise werden die CSS Befehle statisch in der CSS Datei festgelegt.
Aber oft muss man bei einer bereits gerenderten Website die CSS Zuweisungen dynamisch ändern und anzeigen.
Da JavaScript und jQuery Client basierte Sprachen sind,
passiert das dann alles beim Client im Browser
und es muss nichts zum Server zurück geschickt werden.

Beispiele style.visibility und style.display

Beim style.visibility habe ich zwei Eigenschaften zur Auswahl: visible und hidden.
Das style.visibility kann auch noch collapse und inherit,
...aber das möchte ich hier nicht erklären.


document.getElementById('myID').style.visibility = "visible";
document.getElementById('myID').style.visibility = "hidden";

document.getElementById('myID').style.display = "block";
document.getElementById('myID').style.display = "none";


Die folgenden Beispiele veranschaulichen den Unterschied,
zwischen den beiden CSS Eigenschaften.

Wenn man bei einem Objekt visibility:hidden zuweist (Beispiel 1),
ist der Objekt schon in der Seite plaziert, nur eben unsichtbar.

Wenn man bei einem Objekt display:none zuweist (Beispiel 2),
existiert das Objekt nicht auf der Seite.
Und wird erst bei der CSS Eigenschaft Zuweisung platziert.
der Seiten Content wird dann neu angepasst und veschiebt sich dementsprechend.


--- Beispiel 1 über der hidden-Tabelle ---

--- Beispiel 1 unter der hidden-Tabelle ---



--- Beispiel 2 über der display:none-Tabelle ---

--- Beispiel 2 unter der display:none-Tabelle ---

Zum Beispiel 1 habe ich noch folgende JavaScript Funktion gemacht:

function visibilityChange(){
    var obj = document.getElementById('myHiddenTable');
    if (obj.style.visibility === 'hidden') {
        obj.style.visibility = 'visible';
    } else {
        obj.style.visibility = 'hidden';
    }
}

und den Button:
<button type="button" onclick="visibilityChange();">Beispiel1: change style visibility!</button>


Zum Beispiel 2 habe ich noch folgende JavaScript Funktion gemacht:

function displayChange(){
    var obj = document.getElementById('myDisplayNoneTable');
    if (obj.style.display === 'none') {
        obj.style.display = 'block';
    } else {
        obj.style.display = 'none';
    }
}

und den Button:
<button type="button" onclick="displayChange();">Beispiel2: change style display!</button>


jQuery show & hide equivalent zu CSS style display block/none




--- Beispiel 3 über der jQuery ShowHide-Tabelle ---

- jQuery ShowHide example 3 -

--- Beispiel 3 unter der jQuery ShowHide-Tabelle ---

Das jQuery Script show & hide
verhält sich also ähnlich
wie das JavaScript visible & hidden
Die Objekte sind schon auf der Seite, werden nur noch nicht angezeigt.

Also die sind noch versteckt oder nicht sichtbar
, haben aber ihren Platz auf der Seite schon reserviert!

Im Gegensatz zum display none & block,
wo die Objekte erst dann Ihren Platz einnehmen,
wenn Sie wirkich angezeigt werden sollen

Einbindung vom jQuery script von Beispiel 3

Zunächst muß hierzu eine jQuery Library eingebunden werden.
Man kann sich dazu eine jQuery Library lokal speichern
oder eine aus dem Web verlinken.

Die Google Hosted Libraries bietet dafür einfache snippet an:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

oder andere jQuery latest:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Dann kommt wieder eine JavaScript funktion mit jQuery script
die man beim Button onClick Event aufruft:

function jQueryShowHide(){
    if($("#myJQueryShowHide").is(':visible'))
    {
        $("#myJQueryShowHide").hide();
    }
    else
    {
        $("#myJQueryShowHide").show();
    }
}

nicht zu vergessen der Button mit dem onClick Event

<button type="button" onclick="jQueryShowHide();">change show hide jQuery!</button>

display none block im jQuery code

geht nicht... gibt's nicht...
Wer gerne im jQuery coded,
kann natürlich auch einfach die CSS Eigenschaft einen Objektes im HTML Dokument ändern:


if ( $(element).css('display') == 'none' ){
    // element ist nicht sichtbar und keinen Platz reserviert
}


Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Bold Italic Underline Strike Superscript Subscript Code PHP Quote Line Bullet Numeric Link Email Image Video
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
What is the sum of 1 + 2 + 3?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics