JavaScript: Eine mit CSS definierte Class manipulieren

AlexH · 18.02.2010

.
.
.
Hallo, liebe Coder und Skripter,
ich programmiere selber in Java und C, von Javascript habe ich aber - auf Webseiten und CSS bezogen - nur wenig Ahnung.

Mein Problem:
Ich möchte, dass meine Webseite auf bestimmte Systemeigenschaften, wie z.B. die Bildschirmauflösung reagiert. Soll heißen, wenn die Bildschirmauflösung beispielsweise 1920px (width) beträgt,
soll die CSS- Klasse "subMenuButtons" das Attribut width vom Wert X auf den Wert y ändern. Dies soll anhand von JavaScript direkt beim Aufruf der Seite geschehen. (Letztgenanntes habe ich schon mit

PHP:

<body onload="resizePage()" ... >

realisiert.

Meine Frage:
Ist es überhaupt möglich, "global" CSS- Klassen, bzw. dessen Attribute, anhand von JavaScript zu verändern (die Veränderung soll auf nur temporär wirken, d.h. nicht gespeichert werden)?
Und wenn ja: wie?

Ich hoffe, dass meine Problemschilderung ausreichend ausformuliert ist und ihr alles gut verstehen und mit eine Anwort geben könnt. Bis dahin, gute Nacht.

Danke schonmal!

Liebe Grüße,

AlexH

P.S.
Suchfunktion und Google wurden schon verwendet, leider habe ich keine passenden Erbegnisse gefunden, bzw. mit meinen Suchbegriffen keines finden können!
.
.
.

saila · 18.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

Ja ist es - allerdings indirekt und im Forum gibt es hierzu auch reichlich Infos.

AlexH · 18.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

Die einzigen Beiträge, die ich finde, handeln davon, einem Tag eine andere Klasse zuzuweisen. Das ist ja genau das, was ich nicht erreichen möchte. Ich will ein Attribut der Klasse selber ändern.
Und diesbezüglich finde ich mit der Suchfunktion nichts.

Lord_Crash · 18.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

verstehe ich das recht, dass du über eine Funktion, einen, in einer css gespeicherten Datei, statischen Parameter ändern möchtest? Um nacher z.b. einen Button 3px breiter und 4px höher zu machen?

sokie · 18.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

wenn du auf einzelne css eigenschaften neu setzen willst kannst du das per style.eigenschaft machen. für die backgroundColor des body könnte das so aussehen:

Code:

document.getElementsByTagName("body")[0].style.backgroundColor = "#333366";

welche methoden es noch gibt um auf Elemente zuzugreifen findest du hier:

ein bisschen fraglich ist allerdings was eine funktion resizePage() überhaupt bei body onload machen soll...

AlexH · 19.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

Hey, Leute,

danke für eure Antworten.
Lord_Crash kommt an mein Problem am nächsten heran. Ich will nicht ein einzelnes Tag bearbeiten/verändern, sondern z.b. alle Buttons/Links, die z.b. der CSS-Klasse subNavigation angehören. Soll heißen, dass ich sogesehen eine Eigenschaft der CSS-Klasse ändern müsste (temporär, nicht in der .css selbst).

Ich hoffe, dass das überhaupt möglich ist und wenn ja, wie?

@sokie
resizePage(); ist nur ein Beispiel. Ich fande, dass mein Problem mit der Größe meherer Objekte am einfachsten zu erklären ist.

liebe Grüße,

AlexH

SvenBrnn · 19.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

Wenn ich das richtig Verstehe willst du etwas wie ein getElementsByClass.

Code:

function getElementsByClass(searchClass,node,tag) {
  var classElements = new Array();
  if (node == null)
    node = document;
  if (tag == null)
    tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i = 0, j = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
}

(Quelle: )

Dannach kannst du die Style Eigentschaft der Elemente im gelieferten Array Verändern.

AlexH · 19.02.2010

AW: JavaScript: Eine mit CSS definierte Class manipulieren

@SvenBrnn
Ich danke dir.
Genau so etwas habe ich gesucht.
Klappt wie geschmiert und erfüllt alle meine Erwartungen.
Danke, danke, auch an die Anderen

Grüße,

Alex