nicht angemeldet
Anzeigen/ Verstecken von div-Blöcken
Hallo,
ich habe eine kleine Frage mit einer (denke ich) kurzen Antwort.
Und zwar will ich verschiedene div Blöcke mal anzeigen und dann wieder verstecken.
In dem unten angehangenen Beispiel ist gezeigt, wie man einen div-Block nachträglich ausrichten kann, aber wie greife ich auf die Sichtbarkeit zu?
document.getElementById("zweiter").??????? = "??????";
Da hänge ich gleich noch eine andere kleine Frage an, kann ich auch den Inhalt (Text) dynamisch ändern. Wenn ja, wir greife ich darauf zu?
Beispiel von Selfhtml 8.0:
<html><head><title>Test</title>
<style type="text/css">
<!--div { border:solid 3px red; padding:10px; }-->
</style>
<script type="text/javascript">
<!--
function ausrichten() {
document.getElementById("zweiter").align = "center";
document.getElementById("dritter").align = "right";
}
//-->
</script>
</head><body>
<div id="erster"><h1>Erster Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="zweiter"><h1>Zweiter Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="dritter"><h1>Dritter Bereich</h1><p>mit etwas Text</p></div>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>
-
Hi,
hier ein bisschen was zum Spielen.
Musst Dir nur ein neues Bild malen und eine externe Textdatei bauen...
<!-- --------------------------------------------------- -->
<html><head>
<title> CSS Möglichkeiten </title>
<script language="JavaScript" type="text/javascript">
<!--
function show()
{
if(document.getElementById)
{
document.getElementById("Seitentext").innerHTML =
parent.frames["DATEI"].document.getElementsByTagName("xmp")[0].innerHTML;/*alert(document.getElementById("DATEI").value);*/
/*alert(parent.frames["DATEI"].document.getElementsByTagName("xmp")[0].innerHTML);*/document.getElementById("A1").style.visibility = "visible";
}
}function hide(element)
{
if(document.getElementById)
document.getElementById(element).style.visibility = "hidden";
}
//-->
</script><style type="text/css">
<!--
/*body { }*/
#Ueberschrift { position:absolute; top:20px; left:20px; z-index:3;}
#Unterschrift { position:absolute; top:170px; left:20px; z-index:6;}
#Schatten { position:absolute; top:57px; left:22px; z-index:4;}
#Grundkoerper { position:absolute; top:50px; left:15px; width:250; height:100; z-index:5;}
#A1
{
position:absolute;
top:10px;
left:10px;
/*margin-top:20px;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;*/
border-width:10px;
border-style:ridge;
border-color:blue;
padding:20px;
background-color:gold;
width:600px;
visibility:
z-index:1;}#A2
{
/*top:2px;
left:50px;*/
width:300px;
height:195px;
margin:0;
z-index:2;
float:left;
/*background-color:aqua;*/
overflow:hidden
}#Seitentext { z-index:7;}
-->
</style></head>
<body bgcolor="white" text="black">
<div>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
Hallo, hier steht ein Text<br>
</div><div id="A1"> <!-- 1 -->
<div id="A2"> <!-- 2 --><div id="Ueberschrift" style="background:white; border:solid 2px yellow;">Überschrift</div>
<div id="Schatten" style="background-color:#c0c0c0;width:250; height:100;">Schatten</div>
<div id="Schatten" style="background-color:#a0a0a0;width:249; height:99; z-index:4;">Schatten</div>
<div id="Schatten" style="background-color:#808080;width:248; height:98; z-index:4;">Schatten</div>
<div id="Schatten" style="background-color:#606060;width:247; height:97; z-index:4;">Schatten</div>
<div id="Schatten" style="background-color:#404040;width:246; height:96; z-index:4;">Schatten</div>
<div id="Grundkoerper" style="background:white; border:solid 20px yellow;">
<img src="Test-Bild.bmp" width="210" height="60"></div>
<div id="Unterschrift" style="background:white; border:solid 0px yellow;">Unterschrift</div></div> <!-- 2 -->
<div id="Seitentext"
style="font-family:'Trebuchet MS',sans-serif;
font-size:10pt;
line-height:120%;
text-align:justify;" >Seitentext <br>
Hier steht dann, was mit
dem Bild optisch
wahrgenommen wird,
in Textform.
Jede Menge Blindtext muss erzeugt werden, um den Textfluss zutesten.
Darum diese sinnlosen Zeilen !!! Hier steht dann, was mit
dem Bild optisch
wahrgenommen wird,
in Textform.
<p><a href="javascript:hide('A1')">Verstecken!</a></p>
</div></div> <!-- 1 -->
<div>
<p><a href="javascript:show()">Anzeigen!</a></p>
</div><iframe src="text.txt" width="0" height="0" NAME="DATEI">
</body>
</html>Liebe Grüße aus http://www.braunschweig.de
Tom
--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen. -
Hallo Mathew,
In dem unten angehangenen Beispiel ist gezeigt, wie man einen div-Block nachträglich ausrichten kann, aber wie greife ich auf die Sichtbarkeit zu?
Die Sichtbarkeit wird durch die CSS-Eigenschaft "display" bestimmt:
document.getElementById("zweiter").style.display = "none"; /* ausblenden */
document.getElementById("zweiter").style.display = "block"; /* als Block-Element einblenden */
document.getElementById("zweiter").style.display = "inline"; /* als Inline-Element einblenden */Du musst aber immer bedenken, dass getElementById (DOM) nicht von allen Browsern unterstützt wird. Also bitte nicht für "essenzielle" Sachen verwenden, höchstens für "Add-ons".
Viel Erfolg,
Robert--
What I "discovered" was that happiness is not something that happens. [...] Happiness, in fact, is a condition that must be prepared for, cultivated, and defended privately by each person.
-- Mihaly Csikszentmihalyi-
Hi Robert,
In dem unten angehangenen Beispiel ist gezeigt, wie man einen div-Block nachträglich ausrichten kann, aber wie greife ich auf die Sichtbarkeit zu?
Die Sichtbarkeit wird durch die CSS-Eigenschaft "display" bestimmt:
Nein, das stimmt leider nicht ganz.
Anzeige_art_: display: (Hier kann man auch _none_ einstellen, aber das ist nicht der selbstzweck von display:)
Anzeige: visibility: (Hier wird lediglich etwas versteckt, jedoch nicht _räumlich_, denn der Platz wird freigehalten. Im Endeffekt wird man also display: und visibility zum _semantisch korrekten:_ vertsecken verwenden.)document.getElementById("zweiter").style.display = "none"; /* ausblenden */
document.getElementById("zweiter").style.display = "block"; /* als Block-Element einblenden */
document.getElementById("zweiter").style.display = "inline"; /* als Inline-Element einblenden */Du musst aber immer bedenken, dass getElementById (DOM) nicht von allen Browsern unterstützt wird. Also bitte nicht für "essenzielle" Sachen verwenden, höchstens für "Add-ons".
Opera 6 etwa kann visibility ändern, aber display nicht :(
Fabian
-
Anzeige: visibility: (Hier wird lediglich etwas versteckt, jedoch nicht _räumlich_, denn der Platz wird freigehalten. Im Endeffekt wird man also display: und visibility zum _semantisch korrekten:_ vertsecken verwenden.)
document.getElementById("zweiter").style.display = "none"; /* ausblenden */
document.getElementById("zweiter").style.display = "block"; /* als Block-Element einblenden */
document.getElementById("zweiter").style.display = "inline"; /* als Inline-Element einblenden */Hallo nochmal,
Ich denke das Problem mit dem freien Platz könnte man durch den z-index lösen. Müsste man mal probieren, wäre auf jeden Fall eine einfache Lösung.
Gruß
Carsten-
Hi,
Ich denke das Problem mit dem freien Platz könnte man durch den z-index lösen. Müsste man mal probieren, wäre auf jeden Fall eine einfache Lösung.
Ja, siehe mein Beispiel.
Musst nur ein Bild und eine Textdatei ergänzen, dann läufts.
Die wollte ich hier nicht mit posten.Liebe Grüße aus http://www.braunschweig.de
Tom
--
Intelligenz ist die Fähigkeit, aus Fehlern Anderer zu lernen und Mut die, eigene zu machen.
-
-
-
-
Hallo,
schau dir dazu mal das style Objekt an. Du kannst die style eigenschaften eines HTML-Elements verändern. Das sieht dann ungefähr so aus:
element = document.getElementById('deinelement');
element.style.visibiliy = 'hidden'; // oder visible
element.style.fontFamily = 'Verdana';
usw...Gruß
Carsten