Dann versuchen wir es mal (Ich mach es mal ein bischen ausführlicher, sonst dürfte es schwer werden für dich):
Zitat:
function changeCSS()
{
<!-- Hier kommen die Weiteren Anweisungen rein -->
}
Grundgerüst einer jeden Javascript Funktion/Methode. Jenachdem steht zwischen "(" und ")" noch ein Übergabeparameter und am Ende ein Rückgabewert, wird hier allerdings nicht benötigt .
Zitat:
for (var i = 0; i < document.getElementsByTagName("Tag").length; i++)
{
document.getElementsByTagName("p")[i].style.color = "#XXXXXX";
document.getElementsByTagName("p")[i].style.border = "type color Xpx";
document.getElementsByTagName("p")[i].style.backgroundColor = "#XXXXXX";
<!-- WEITERE ATTRIBUTE -->
}
Tag, welcher geändert werden soll
Attribut, welches geändert werden soll
Hiermit werden die CSS-style attribute aller Elemente, vom Typ <TagName> geändert (Im Beispiel die "<p>" tags).
Funktioniert mit jedem beliebigen tag und Css Attribut analog.
So jetzt muss ich zugeben wirds vielleicht doch etwas schwerer. In Javascript gibt es keine Funktion getElementsByClassName, da class ein belegtes keyword ist. Einige Browser unterstützen das zwar, ist allerdings kein Standard.
Ein wirkliches Problem ist es aber auch nicht müssen wir uns die Methode halt selbst schreiben. Wobei wir hier auch wieder etwas unangenehmes haben, Microsoft und sein toller super Browser machen nämlich mal wieder ihr eigenes Ding, dazu aber gleich mehr.
Die folgende Funktion durchsucht den gesamten DOM - Baum oder anderst ausgedrückt, das ganze Html Dokument, nach tags, die class=" gesuchteKlasse" haben und gibt all diese Elemente an die aufrufende Funktion zurück.
Zitat:
function getElementsByClassName(classToFind) <===Funktionskopf kennen wir ja schon von vorhin, und siehe da, hier ist ja auch der eben angesprochene Übergabeparameter. In diesem Fall classToFind, wie der Name schon sagt, ist das der Name der gesuchten Klasse.
{ // jetzt legen wir uns die Variablen an, die wir gleich benötigen, das // könnten wir theoretisch auch erst dann machen, wennn wir sie wirklich // brauchen, ich hab mir aber angewöhnt die Variablen am Anfang zu // deklarieren, da in den C Sprachen eine Deklaration nur am Anfang möglich // ist.
var elements;
var located = new Array(); <== Ein Array ist vereinfacht ausgedrückt, ein Objekt in dem mehere gleiche Dinge gespeichert werden
var i;
var j = 0;
var tempstr;
// Jetzt zu der besonderheit von Microsoft. Der IE ermöglicht den zugriff auf alle // Elemente, über document.all. Daher Fragen wir jetzt ob dies möglich ist.
if(document.all)
elements = document.all; <== Wenn es möglich ist speichern wir alle Elemente in der Variablen elements, diese ist also auch ein Array. Ist es nicht möglich, benutzen wir den Zugriff auf die Elemente, den die anderen Browser bieten.
else
elements = document.getElementsByTagName("*");
// So jetzt müssen wir noch schauen welche Elemente zu der gesuchten // Klasse gehören, diese Speichern wir dann in unserem Array located
for(i = 0; i < elements.length; i++)
{
if(elements[i].className.indexOf(class_name) != -1)
{
tempstr = ","+elements[i].className.split(" ").join(",") + " , ";
if(tempstr.indexOf(","+class_name+",") != -1)
{
located[j]=elements[i];
j++;
}
}
}
// Zu guter letzt geben wir jetzt das Array mit den gefundenen Elementen, also // located zurück.
return located;
}
...da wir uns die benötigte Funktion gerade gechrieben haben können wir in unserer eigentlichen funktion changeCSS, diese jetzt wieder analog zu getElementsByTagName aufrufen:
Zitat:
for (var i = 0; i < document.getElementsByClassName("p").length; i++) {
document.getElementsByClassName("a")[i].style.border = "typ color XXpx";
document.getElementsByClassName("a")[i].style.backgroundColor = "#XXXXXX";
document.getElementsByClassName("a")[i].style.color = "#XXXXXX";
document.getElementsByClassName("a")[i].style.fontSize = "XX%";
<!-- WEITERE ATTRIBUTE -->
}
class, welche geändert werden soll
Attribut, welches geändert werden soll
Hiermit werden die CSS-style attribute aller Elemente einer class geändert (Im Beispiel die "class="a"" ).
Funktioniert mit jeder beliebigen class und jedem Css Attribut analog.
Zitat:
document.getElementById("ID_DES_ELEMENTES").style.backgroundColor="#XXXXXX";
<!-- WEITERE ATTRIBUTE -->
Das gleiche wie zuvor, hier werden allerdings nur die Attribute des Elementes mit der id="ID_DES_ELEMENTES" geändert.
Daher auch keine Schleife, eine ID einzigartig ist.
So und zum Schluss mal noch nen kompletten Sourcecode (Ist ungetestet, sollte aber gehen vorrausgesetzt ich hab mich nicht vertippt!):
Zitat:
<script type="text/javascript">
function getElementsByClassName(class_name)
{
var elements;
var located = new Array();
var i;
var j = 0;
var tempstr;
if(document.all)
elements = document.all;
else
elements = document.getElementsByTagName("*");
for(i = 0;i < elements.length; i++)
{
if(elements[i].className.indexOf(class_name) != -1)
{
tempstr = ","+elements[i].className.split(" ").join(",") + " , ";
if(tempstr.indexOf(","+class_name+",") != -1)
{
located[j]=elements[i];
j++;
}
}
}
return located;
}
function changeCSS()
{
var i;
for (i = 0; i < document.getElementsByTagName("Tag").length; i++)
{
document.getElementsByTagName("p")[i].style.color = "#XXXXXX";
document.getElementsByTagName("p")[i].style.border = "type color Xpx";
document.getElementsByTagName("p")[i].style.backgroundColor = "#XXXXXX";
<!-- WEITERE ATTRIBUTE -->
}
for (i = 0; i < document.getElementsByClassName("p").length; i++)
{
document.getElementsByClassName("p")[i].style.border = "typ color XXpx";
document.getElementsByClassName("p")[i].style.backgroundColor = "#XXXXXX";
document.getElementsByClassName("p")[i].style.color = "#XXXXXX";
document.getElementsByClassName("p")[i].style.fontSize = "XX%";
<!-- WEITERE ATTRIBUTE -->
}
document.getElementById("ID_DES_ELEMENTES").style.backgroundColor="#XXXXXX";
<!-- WEITERE ATTRIBUTE -->
}
</script>
So ich hoffe das war halbwegs verständlich, wenn de Fragen hast, kannst mich gerne noch fragen. Ansonsten wünsch ich dir viel spaß damit!  [/quote]
Zuletzt bearbeitet von mynop am 10.06.2011, 02:01, insgesamt 2-mal bearbeitet
|
[/quote]