Elemente innerhalb eines bestimmten Elementes ansprechen

[floater]

Hallo,

ich möchte per Javascript Elemente innerhalb eines durch eine ID gekennzeichneten Elementes ansprechen, genauer gesagt die Styles ändern.

----
<div id="element1">
  <table>
   <tr>
    <td>a</td>
    <td>b</td>
   </tr>
  </table>
  <p>x</p>
</td>
----

So möchte ich hier per Javascript zum Beispiel alle TDs innerhalb des DIVs mit der ID element1 ändern.

Ist das überhaupt möglich?

Habe dabei an so etwas wie

window.document.getElementById("element1").tags("td").style.color

gedacht...

Gruß,
Floater

[Mathias Brodala]

Hallo floater.

So möchte ich hier per Javascript zum Beispiel alle TDs innerhalb des DIVs mit der ID element1 ändern.

Ist das überhaupt möglich?

Habe dabei an so etwas wie

window.document.getElementById("element1").tags("td").style.color

gedacht...

Du musst „window“ nicht explizit nennen, da dieses Objekt global ständig verfügbar ist. Des weiteren war dein Gedanke schon richtig, nur musst du „tags“ durch „getElementsByTagName“ ersetzen und natürlich den entsprechenden Index hinzufügen.

Einen schönen Donnerstag noch.

Gruß, Mathias

[floater]

Hallo,

danke für Eure Hilfe.

Ich habe es nun hinbekommen:

-----
if(doc.getElementById("implementedSourceCode").getElementsByTagName("td").length > 0)
   {
    for(i = 0 ; i < doc.getElementById("implementedSourceCode").getElementsByTagName("td").length ; i++)
    {
     doc.getElementById("implementedSourceCode").getElementsByTagName("td")[i].style.color = color;
    }
   }

-----

Gruß,
Floater

[Mathias Brodala]

Hallo floater.

Ich habe es nun hinbekommen:

---

if(doc.getElementById("implementedSourceCode").getElementsByTagName("td").length > 0)
   {
    for(i = 0 ; i < doc.getElementById("implementedSourceCode").getElementsByTagName("td").length ; i++)
    {
     doc.getElementById("implementedSourceCode").getElementsByTagName("td")[i].style.color = color;
    }
   }

Kürzer und effizienter:

var TDs = document.getElementById("implementedSourceCode").getElementsByTagName("td");  
  
for (var i = 0; i < TDs.length; ++i) {  
  
  TDs[i].style.color = color;  
}

Du sparst dir hier Dutzende von Methodenaufrufen und machst den Code lesbarer. (Die erstmalige Überprüfung der Zellenanzahl ist überflüssig, da ja „0 < 0“ unwahr ist, die Schleife bei Abwesenheit von Zellen sowieso nicht ausgeführt wird.)

Einen schönen Donnerstag noch.

Gruß, Mathias

[floater]

Hallo,

super!!!

Danke und Gruß,
Floater

[Gunnar Bittersmann]

Hello out there!

So möchte ich hier per Javascript zum Beispiel alle TDs innerhalb des DIVs mit der ID element1 ändern.

_Alle_ heißt Schleife: alle TDs dieser Tabelle durchgehen und deren Farbe setzen.

Oder du änderst dynamisch die Regel für den Selektor '#element1 td'. (Archivsuche nach "CSSRules")

Am einfachsten dürfte sein, wenn du nur aus einer vorbestimmten Anzahl von Stilen auswählen willst, dynamisch die Klasse der Tabelle zu ändern und im Stylesheet die Formatierungen für 'table.stil1 td', 'table.stil2 td', ... anzugeben.

See ya up the road,
Gunnar