✔ Problem mit cssRules und style

[-André-]

Hallo,
ich möchte eine Bildergalerie auf meiner Homepage in valides Xhtml und css umschreiben und deshalb die style-Attribute aus dem Code in Css-Selectoren packen.

ich habe folgende Javascriptfunktionen:

*Funktion zum Einfuegen einer CSS Regel>>>>*/
function cssEinf (styleS,selector, wert, index) 
{
	if(document.styleSheets[0].cssRules) 
	{
		styleS.insertRule(selector+"{"+wert+"}",index);
	}
	else if(document.styleSheets[0].rules)
	{
		styleS.addRule(selector,wert,index);
	}
}	
/*Function zum hinzufuegen / aendern einer Eigenschaft>>>>>*/
function cssAe (styleS,index)
{
	var argumenteAz = arguments.length;
	if(document.styleSheets[0].cssRules) 
	{
		var regel = styleS.cssRules[index];
		var eigenschaft;
		for(var arg = 2; arg<argumenteAz; arg+=2)
		{	
			eigenschaft = arguments[arg];
			regel.style.eigenschaft = arguments[arg+1];
			alert(eigenschaft+ regel.style.eigenschaft);
		}
	
	}
	else if(document.styleSheets[0].rules)
	{
		var regel = styleS.rules[index];
		var eigenschaft;
		for(var arg = 2; arg<argumenteAz; arg+=2)
		{
			eigenschaft = arguments[arg];

			regel.style.eigenschaft = arguments[arg+1];
		}
	}
}

davor wir das Style-Element dynamisch erstellt:

/*-----Style Element erstellen>>>>>*/
	var myStyleE = document.createElement("style");
	myStyleE.setAttribute("type","text/css");
	document.getElementsByTagName("head")[0].appendChild(myStyleE);
	/*<<<<<Style Element erstellen-----*/
	/*-----Style Element auswaehlen>>>>*/
	var styles = document.styleSheets.length;
	myStyle = document.styleSheets[styles-1];
	/*<<<<<Style Element auswaehlen----*/
	/*-----Style Anweisungen schreiben>>>>>*/
	cssEinf(myStyle,"#bild","",indexBild);
	cssEinf(myStyle,"#wgtext","",indexWgText);
	cssEinf(myStyle,"#schliessenImg","",indexSchliessenImg);
	cssEinf(myStyle,"#weiterBild","",indexWeiterBild);
	cssEinf(myStyle,"#zureueckBild","",indexZurueckBild);
	cssEinf(myStyle,"#bilderzahl","",indexBilderzahl);
	/*<<<<<Style Anweisungen schreiben-----*/

Die Variablen index... werden vorher global definiert.

die Funktionen rufe ich so auf:

cssAe(myStyle,indexBild,"position","absolute","left",Math.round(((fensterbreite-breiteaz)/2)-20)+"px","top",Math.round((fensterhoehe-hoeheaz)/2)+"px");

Ich habe mir das ganze im Firefox mit Firebug betrachtet, die Regel #bild existiert, aber die Eigenschaften und werte sind nicht eingetragen, die Regel ist also leer.
Wenn ich die Zeile

regel.style.eigenschaft = arguments[arg+1];

der Funktion cssAe z.B. in

regel.style.margin = arguments[arg+1];

ändere, wird diese Zuweisung auch von Firefox erkannt, d.h die Regel #bild ist nicht mehr leer.

Woran liegt das, bzw. wie kann ich das ändern?

Gruß

-André-

 

[kuddeldaddeldu]

Hi,

Ich habe mir das ganze im Firefox mit Firebug betrachtet, die Regel #bild existiert, aber die Eigenschaften und werte sind nicht eingetragen, die Regel ist also leer.
Wenn ich die Zeile

regel.style.eigenschaft = arguments[arg+1];

der Funktion cssAe z.B. in

regel.style.margin = arguments[arg+1];

ändere, wird diese Zuweisung auch von Firefox erkannt, d.h die Regel #bild ist nicht mehr leer.

Woran liegt das, bzw. wie kann ich das ändern?

Ohne jetzt den Sinn dahinter so richtig verstanden zu haben (soll das onload bei Aufruf der Galerie laufen?):

Mit

regel.style.eigenschaft = ...;

versuchst Du die CSS-Eigenschaft "eigenschaft" zu ändern, die es natürlich nicht gibt. Versuch es mal so:

regel.style[eigenschaft] = ...;

LG

 

[-André-]

Danke, mit

regel.style[eigenschaft]

klappt das jetzt.

Gruß

-André-