Zugriff auf Klasse und Veränderung des Style-Attribut von DIV Elementen

[Crackp0t]

Mein Projekt steht nun soweit und ich bastel nur noch an der Verschönerung des Quelltextes ohne Frameworks zu benutzen

Zum Zentrieren von diversen Elementen habe ich mir eine Funktion geschrieben, die Elemente mit einer bestimmten Klasse anhand der window.inner Werte oder des Parent-Elements ausrichtet. Leider klappt der Zugriff auf die Attribute nicht ganz wie gewollt. Wenn ich das selbe mit IDs versuche klappt es, jedoch lassen sich IDs ja nur ein Mal vergeben. Was läuft da falsch?

Fehlerkonsole(Zeilennummer angepasst):

Fehler: center_window.style is undefined
Zeile: 3

Quelltext:

unction makeAllCenter() {
var center_window = document.getElementsByTagName("div").className = "center_w";
var center_window_v = (parseInt(center_window.style.height))/2;
var center_window_h = (parseInt(center_window.style.width))/2;

var center_window = document.getElementsByTagName("div").className = "center_p";
var center_parent_v = (parseInt(center_parent.style.height))/2;
var center_parent_h = (parseInt(center_parent.style.width))/2;

center_window.style["top"] = window.innerHeight/2 - center_window_v;
center_window.style["left"] = window.innerWidth/2 - center_window_h;

center_parent.style["top"] = (parseInt(center_parent.offsetParent.style.height))/2 - center_parent_v;
center_parent.style["left"] = (parseInt(center_parent.offsetParent.style.width))/2 - center_parent_h;
}

MFG

 

[Duddle]

AW: Zugriff auf Klasse und Veränderung des Style-Attribut von DIV Elementen

Was soll denn diese Zeile bewirken?

var center_window = document.getElementsByTagName("div").className = "center_w";

Willst du ein div, bei dem der className "center_w" ist? Diese Form habe ich jedenfalls noch nie gesehen, und sie scheint mir auch falsch - lasse mich da aber gern belehren.

Selbst wenn diese Form stimmen würde, würdest du mit getElementsByTagName() zumindest ein Array zurück bekommen, und über das musst du wohl oder übel loopen um die einzelnen Elemente zu verändern.

Eine Nebenfrage: warum benutzt du kein Framework? Hab z.B. selbst erst seit einer Woche jQuery im Fokus, aber das erspart mir jetzt schon sehr, sehr viel Arbeit.


Duddle

 

[Crackp0t]

AW: Zugriff auf Klasse und Veränderung des Style-Attribut von DIV Elementen

Ich beschäftige mich erst seit ~2 Wochen mit JS und bevor ich ein Framework nutze, will ich einen Wissensstand besitzen der ausreichend ist, um zu verstehen was in den einzelnen Funktionen vorgeht. Es ist eine Art Zwangsstöhrung, dass ich Dinge, mit denen ich zu tun habe, vor dem Nutzen erst richtig verstehen will.

Mit der Zeile will ich, wie du schon sagtest, die div mit der Klasse "center_w" selektieren, um sie dann im Verlauf der Funktion zu zentrieren. alert(center_window); gab mir "center_w" zurück, aber ich zweifle auch inzwischen daran, dass dieser Ansatz funktioniert.

An eine Schleife zum Selektieren der einzelnen Elemente musste ich auch immer denken, jedoch fehlte mir der Ansatz...

 

[sokie]

AW: Zugriff auf Klasse und Veränderung des Style-Attribut von DIV Elementen

Mein Projekt steht nun soweit und ich bastel nur noch an der Verschönerung des Quelltextes ohne Frameworks zu benutzen

Zum Zentrieren von diversen Elementen habe ich mir eine Funktion geschrieben, die Elemente mit einer bestimmten Klasse anhand der window.inner Werte oder des Parent-Elements ausrichtet. Leider klappt der Zugriff auf die Attribute nicht ganz wie gewollt. Wenn ich das selbe mit IDs versuche klappt es, jedoch lassen sich IDs ja nur ein Mal vergeben. Was läuft da falsch?

Du solltest ein Framework benutzen.
die eigenschaften und methoden, die Du verwendest stehen nicht browserübergreifend zur Verfügung (das wird dir die Fehlermeldung eines Browsers allerdings nicht sagen). Frameworks stellen methoden zur Verfügung, die die verschiedenen Browser berücksichtigen.

document.getElementByTagName("div") liefert dir eine Sammlung der Elemente, die in der Klammer angegeben sind als Array. Array hat keine Eigneschaft "className". Um die einzelnen Elemente dieses Arrays anzusprechen, und tatsächlich deren classNames zu setzen müsstest du durch das Array itererieren und für jedes Element die Zuweisung vornehmen (for-Schleife).

style ist ein Objekt und kein Hash. eigenschaften von Objekten werden mit der Punkt-Syntax angesprochen: style.eigenschaft nicht style["eigenschaft"]

Es ist eine Art Zwangsstöhrung, dass ich Dinge, mit denen ich zu tun habe, vor dem Nutzen erst richtig verstehen will.

das könnte für die Benutzung von zB der Adobe Production Premium Suite schon ein paar Jahre brauchen.

 

[Crackp0t]

AW: Zugriff auf Klasse und Veränderung des Style-Attribut von DIV Elementen

Die style["eigenschaft"] Schreibweise hat bis jetzt bestens funktioniert, wird wohl nicht bei allen Browsern so sein?
Mir ist durchaus bewusst, dass meine Seite im IE in Fetzen gerissen wird, aber es ist doch ein Anfang, wenn ich sie erstmal in einem Browser wie gewollt darstellen kann.
Habe außerdem nie davon geredet, dass ich Frameworks niemals benutzen werde.

Naja also was du meinst ist also:

center_window = document.getElementByTagName("div")
for (var i=0;center_window.length<i;i++) {
if (center_window[i].className == "center_w") {
var center_window_v = (parseInt(center_window[i].style.height))/2;
var center_window_h = (parseInt(center_window[i].style.width))/2;
center_window[i].style.top = window.innerHeight/2 - center_window_v;
center_window[i].style.left = window.innerWidth/2 - center_window_h;
} else {
if (center_window[i].className == "center_p") {
...
}
}
}

Wenn ich das richtig verstanden habe?