[gelöst] mit js css eingenschaft ändern

Webdesign & Technik HTML & CSS
1

Hi, ich versuch mir grad n kleines script zu basteln, das folgende funktion haben soll:
bei klick auf ein link wir überprüft, wie die css-eigenschaft display: gesetzt ist. daraufhin soll sie entweder von ‘none’ zu ‘block’ oder eben andersrum geändert werden.
d.h. jedesmal wenn man den link klickt ändert sich die eigenschaft, je nach dem wie sie vorher war. hab das mal so versuch, klappt aber nich:

[code]var css = document.getElementById(id).style.display;

function showhide(id)
{

if (css == 'none') {
	document.getElementById(id).style.display = ‘block’;
} else {
	document.getElementById(id).style.display = ‘none’;
}

}[/code]
aufgerufen wir das script über <a href="javascript: showhide('beispiel');">

was is da falsch am script??

danke, leexx

2

hi, evtl. versucht mal so:

[code]
var css = document.getElementById(“id”).style.display;

function showhide(id)
{

if (css == 'none') {
	document.getElementById("id").style.display = "block";
} else {
	document.getElementById("id").style.display = "none";
}

}[/code]

P.S: Bin voll der Anfänger in Java Script :wink:

3

danke, hat bisher aber keine veränderung gebracht.
ich denk das is was grundlegenderes, aber da ich ebenfalls der absolute anfänger in javascript bin, hab ich keine ahnung was.

4

Du kannst ueber das style-Objekt nur Werte von Eigenschaften auslesen, die direkt per style-Atribut am Element selber, oder zuvor schon per style-Objekt ueber JavaScript gesetzt worden sind - nicht aber Werte, die sich aus den Regeln eines Stylesheets ergeben, dazu braeuchte es eine getComputedStyle-Funktion.

Ausserdem muesste die Ermittlung des aktuellen Wertes von element.style.display natuerlich in die Funktion mit hinein - sonst ermittelst du den Wert nur genau ein mal vorher, und dann bleibt der Variableninhalt auch bei diesem Wert.

In einem Fall wie dem vorliegenden hilft es aber i.a.R. schon, die Bedingung einfach umzudrehen.
Wenn das Element per Default versteckt ist, dann fragt man auf ==‘block’ ab - das ist, siehe oben, beim ersten mal nicht der Fall, also weist man im else-Zweig ‘block’ zu.
Beim naechsten Mal ist der Wert dann ueber das style-Objekt ermittelbar, siehe oben, ==‘block’ trifft also zu - also weist man ‘none’ zu.

5

Ich habe dieses script als Vorlage, weiß nich mehr woher das is:

[code]// Auswahl/Selektieren der Elemente
var box = new Array();

// ----------------------------------------------------------------------------------

// Anzeigen des Elementes.
function show(id)
{
for(i=0;i<box.length;i++)
{
document.getElementById(box[i]).style.display=“none”;
}

            document.getElementById(id).style.display="block";

}

// ----------------------------------------------------------------------------------

// Verstecken des Elementes.
function hide(id)
{
for(i=0;i<box.length;i++)
{
document.getElementById(box[i]).style.display=“block”;
}

            document.getElementById(id).style.display="none";

}
[/code]
Das fuktioniert auch gut so, ich will allerdings, dass bei einem weiteren klick auf den link das objekt einfach wieder verschwindet… und dachte das würde mit dem oben geposteten code gehn.

chrisb, könntest du mir vielleicht n voschlag posten, hab versucht deinen vorschlag umzusetzten, hat aber nich geklappt:

[code]function showhide(id)
{
var css = document.getComputedStyle(document.getElementById(“id”).style.display)

if (css == 'block')
{
  		document.getElementById("id").style.display = "none";
}

else
{
  		document.getElementById("id").style.display = "block";
}

}[/code]

danke

6

Da werden ja fuer Anzeigen und Verstecken zwei verschiedene Funktionen definiert - dann muesstest du auch den Aufruf der Funktion auswechseln.

Abgesehen davon, dass ich bereits schrieb, dass man getComputedStyle hier gar nicht braucht - wenn du die Funktion schon benutzen wolltest, dann muesstest du dich auch informieren, wie man das macht, statt sie einfach mit einem unsinnigen Parameter zu fuettern und dann mal zu schauen, was wohl passiert.

Also, wie ich schon schrieb - aktuellen Wert der Eigenschaft weiterhin ueber das style-Objekt ermitteln, aber die Bedingung umdrehen.

7

ok, sorry, dann hatte ich deinen post falsch verstanden.
da die eingeschaft “display: none;” eig in nem stylesheet steht, dachte ich ich muss eben diese getComputedStyle funktion benutzen. Ich hab jetzt die eingenschaft jedoch ins style-tag geschrieben und das getComputed weggelassen.

Die abfrage hab ich, wie du oben siehst auch umgedreht. es wird also nach == ‘block’ abgefragt und falls das der fall sein sollte nach ‘none’ geändert. sonst wird es im else nach ‘block’ geändert.

funktionieren tut es trotzdem nicht. wie gesagt, ich bin in js absoluter anfänger, ich wär dir also sehr dankbar, wenn du mir das ganze vielleicht direkt an nem code-beispiel zeigen könntest.

8

Meinst du Tag, oder Attribut?

Und auch das habe ich nicht empfohlen. Die Angabe kann ruhig im externen Stylesheet bleiben, wenn man die Abfrage danach dann entsprechend anpasst.

Tja, jetzt koennte ich versuchen, im Kaffeesatz oder deinen Eingeweiden, so du die denn zu diesem Zwecke zur Verfuegung stellen moechtest, zu lesen, um die Ursache zu finden.

Oder aber, du lieferst das, was eine vernuenftigte Problembeschreibung eigentlich immer enthalten sollte - deinen Beispielcode, an dem sich das Problem nachvollziehen laesst.
(Diesen aber moeglichst auf’s wesentliche reduziert und vorzugsweise als Online-Beispiel.)

9

Wenn man die Augen aufmacht, sollte man es sofort sehen können. :wink:

Guck mal dein getElementById("id") in den letzten Beiträgen.
Du versuchst immer auf das Element mit der id “id” zuzugreifen.

[code]

Show

Inhalt
[/code]

Aber Ich versteh nicht, warum sich leute nicht einfach mal Google zur Hand nehmen.
Solche Themen wurden schon x mal erstellt und x mal beantwortet.

mfg

10

danke. funktioniert.
ich hatte das ganz am anfang so, hab das dann nach fishis post geändert.

bin in js leider absoluter noob.

und ich weiß, google is dein freund, :wink2:
hab wirklich danach gegoogelt und nur kompliziertere lösungen gefunden, bei denen ich garnich meher durchgeblickt hab. :astonished:

also herzlichen dank nochmal! :hail:

leexx