Verschachelte CSS Elemente in JavaScript

[Sipatshi]

Hallo Gemeinde,

wie kann ich folgenden CSS-Code in Javascript umsetzen?:

CSS

#box {
  Anweisung: wert;
}
#box ul {
  Anweisung: wert;
}
#box ul li {
  Anweilsung: wert;
}

XHTML

<div id="box">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
  </ul>
</div>

Gruß

Sipatshi

[Beat]

wie kann ich folgenden CSS-Code in Javascript umsetzen?:

...

Am Einfachsten mit einem Framework wie jQuery.

mfg Beat

[Sipatshi]

Hallo Beat,

Am Einfachsten mit einem Framework wie jQuery.

vielen Dank für dein Tipp aber das hilft mir nicht weiter :-(
Ich will erstmal die Materie verstehen um mich dann ans Framework
ranzusetzen :-)

Gruß

Sipatshi

[ChrisB]

Hi,

wie kann ich folgenden CSS-Code in Javascript umsetzen?:

Du meinst, wie du die CSS-Eigenschaften für jedes einzelne der zum Zeitpunkt der Ausführung von den genannten Selektoren betroffenen Elemente die Werte explizit per JavaScript setzen kannst?

CSS

#box {
  Anweisung: wert;
}
#box ul {
  Anweisung: wert;
}
#box ul li {
  Anweilsung: wert;
}

Na ganz einfach - du weist sie über das style-Attribut dem Element mit der ID #box zu, durchläufst dann alle in diesem Element befindlichen vom Typ UL, und dabei wiederum noch alle jeweils in diesen liegenden vom Typ LI, und weist dabei wiederum zu.

MfG ChrisB

[Sipatshi]

Hallo ChrisB,

Na ganz einfach - du weist sie über das style-Attribut dem Element mit der ID #box zu, durchläufst dann alle in diesem Element befindlichen vom Typ UL, und dabei wiederum noch alle jeweils in diesen liegenden vom Typ LI, und weist dabei wiederum zu.

Soweit bin ich gekommen :-)

document.getElementByID('box').style.backgroundColor = "blue";

Wie kann ich aber das Element li ansprechen ohne ihm eine id zu vergeben.
Sorry, ich habe deine leichte Erklärung nicht geschnallt :-(

<div id="box">
 <ul>
   <li></li>
   <li></li>
 </ul>
</div>

Gruß

Sipatshi

[Patrick Andrieu]

Hallo Sipatshi!

Wie kann ich aber das Element li ansprechen ohne ihm eine id zu vergeben.
Sorry, ich habe deine leichte Erklärung nicht geschnallt :-(

http://de.selfhtml.org/javascript/objekte/node.htm

Viele Grüße aus Frankfurt/Main,
Patrick

[Der Martin]

Hallo,

Soweit bin ich gekommen :-)
document.getElementByID('box').style.backgroundColor = "blue";

Das dürfte eine Fehlermeldung erzeugen, weil Javascript keine Methode namens getElementByID() kennt. Merke: Javascript ist case-sensitive!

Wie kann ich aber das Element li ansprechen ohne ihm eine id zu vergeben.

Was meinst du mit "das"? Du hast mehrere.
Aber keine Sorge, du kriegst sie alle: Wende getElementsByTagName("li") auf das bereits gefundene Elementobjekt für #box an, das liefert dir ein Array aller li-Elemente in #box.

Sorry, ich habe deine leichte Erklärung nicht geschnallt :-(

Macht nix - ich hab's auch zweimal lesen müssen ... ;-)

So long,
 Martin

[Sipatshi]

Hallo Martin,

Das dürfte eine Fehlermeldung erzeugen, weil Javascript keine Methode namens getElementByID() kennt. Merke: Javascript ist case-sensitive!

ja, hab ich bemerkt, Schreibfehler :-)

Was meinst du mit "das"? Du hast mehrere.

ich meinte das Element ul und li :-)

Macht nix - ich hab's auch zweimal lesen müssen ... ;-)

:-)

Gruß

Sipatshi

[Sipatshi]

Hallo ChrisB,

kannst du bitte mal schauen ob das soweit in Ordnung ist. Desweiteren bitte ich dich mir ein weiteren Tip zu geben wie ich das bild innerhalb des Containers Tauschen kann?

CSS

<div id="a_2">
        <h2>7 Tage Angebot</h2>
        <ul>
          <li>VW Passat </li>
          <li>7 Tage für <strong>€329,-</strong></li>
        </ul>
        <img id="bild_2" src="vw_passat.png" alt="VW Passat" />
  </div>

<script type="text/javascript">
               var container     = document.getElementById("a_2");
               var ueberschrift  = container.getElementsByTagName("h2");
               var ul_element    = container.getElementsByTagName("ul");
               var li_element    = ul_element.getElementsByTagName("li");
               var fett          = li_element.getElementByTagName("strong");
var bild          = /* Ein Tip wie ich das Bild mit einbeziehen kann */

container.cssFloat           = "left";
                container.width              = "273";
                container.height             = "273";
container.borderRight        = "1px dotted #8d8d8d";
container.backgroundColor    = "#8d8d8d";
container.backgroundImage    = "url(../l_p.jpg)";
container.backgroundRepeat   = "no-repeat";
container.backgroundPosition = "5px 5px";

	ueberschrift.fontSize        = "19px";  
	ueberschrift.fontWeight      = "normal";  
	ueberschrift.marginTop       = "35px";  
	ueberschrift.marginLeft      = "25px";  
	  
	ul\_element.listStyleType     = "none";  
	ul\_element.marginLeft        = "26px";  
	  
	li\_element.fontSize          = "18px";  
	li\_element.color             = "#003275";  
	li\_element.lineHeight        = "17px";  
	  
	fett.fontSize                = "24px";  
	fett.color                   = "#000";  
	fett.marginLeft              = "8px";  

</script>

[Sipatshi]

So sieht die CSS-Datei aus. Es soll in Javascript umgesetzt werden. Ich versuche es zumindest :-)

Original CSS

/*** Start Angebot Box 1 ***/
#a_1 {
float: left;
width: 273px;
height: 199px;
border-right: 1px dotted #8d8d8d;
background-color: #ededed;
background-image: url(../l_p.jpg);
background-repeat: no-repeat;
background-position: 5px 5px;
}
#a_1 img {
padding: 25px 0 0 115px;
border: 0;
}
#a_1 h2 {
font-size: 19px;
font-weight: normal;
margin-top: 35px;
margin-left: 25px;
}
#a_1 ul {
list-style-type: none;
margin-left: 26px;
}
#a_1 ul li {
font-size: 16px;
color: #003275;
line-height: 17px;
}
#a_1 ul li + li > strong {
font-size: 24px;
color: #000;
margin-left: 8px;
}
/*** Ende Angebot Box 1 ***/

[ChrisB]

Hi,

var ueberschrift  = container.getElementsByTagName("h2");
               var ul_element    = container.getElementsByTagName("ul");
               var li_element    = ul_element.getElementsByTagName("li");
               var fett          = li_element.getElementByTagName("strong");

getElementsByTagName liefert dir keine Referenz auf ein Element zurück, sondern eine NodeList - eine Liste von Elementen.

  ueberschrift.fontSize        = "19px";  

  ul\_element.listStyleType     = "none";  

  li\_element.fontSize          = "18px";  

  fett.fontSize                = "24px";  

All diese Eigenschaften weist du also den NodeLists zu. Die interessieren sich aber nicht dafür, weil sie keine HTML-Elemente sind.

(Ausserdem hast du hier noch vergessen, das style-Objekt einzubauen, um Werte für CSS-Eigenschaften am Element zu setzen.)

MfG ChrisB

[Sipatshi]

Hallo,

var ueberschrift  = container.getElementsByTagName("h2");

var ul_element    = container.getElementsByTagName("ul");
               var li_element    = ul_element.getElementsByTagName("li");
               var fett          = li_element.getElementByTagName("strong");

getElementsByTagName liefert dir keine Referenz auf ein Element zurück, sondern eine NodeList - eine Liste von Elementen.

Ich bin ein Programmierneuling :( Hast du ein beispiel für das was ich erreichen will? Ich bitte um entschuldigung. Ich versuche aus mein Fehlern zu lernen aber momentan verstehe nichts, auch nichts aus der Doku in diversen websites :-(

  ueberschrift.style.fontSize        = "19px";  

  ul\_element.style.listStyleType     = "none";  

  li\_element.style.fontSize          = "18px";  

  fett.style.fontSize                = "24px";  

All diese Eigenschaften weist du also den NodeLists zu. Die interessieren sich aber nicht dafür, weil sie keine HTML-Elemente sind.

(Ausserdem hast du hier noch vergessen, das style-Objekt einzubauen, um Werte für CSS-Eigenschaften am Element zu setzen.)

Ist geändert.

Gruß

Sipatshi

[ChrisB]

Hi,

getElementsByTagName liefert dir keine Referenz auf ein Element zurück, sondern eine NodeList - eine Liste von Elementen.

Ich bin ein Programmierneuling :( Hast du ein beispiel für das was ich erreichen will?

http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name
Das Beispiel dort zeigt das, was du machen willst - in einer Schleife über die Rückgabe von getElementsByTagName laufen, um jedem einzelnen Element über style einen CSS_Eigenschaftswert zuzuweisen.

MfG ChrisB

[Sipatshi]

Hallo Chris,

vielen dank für den Tip. Ich dachte ich hätte es..., aber is nicht so :-(
Desweiteren wird mir in der FF Feherkonsole folgender Fehler angezeigt:

Zeile 7: container is Null. Wird nichts übergeben? Oder was kann ich darunter verstehen?

So sieht jetzt mein Code aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
    var container                         = document.getElementById("a_2");
    var ueberschrift                      = container.getElementsByTagName("h2");
    var ul_element                        = container.getElementsByTagName("ul");
    var li_element                        = ul_element.getElementsByTagName("li");
    var fett                              = li_element.getElementByTagName("strong");
/*var bild                            = /* Ein Tip wie ich das Bild mit einbeziehen kann */

for (var i = 0; i < container.length; i++)
    {
    container[i].style.cssFloat           = "left";
    container[i].style.width              = "273";
    container[i].style.height             = "273";
container[i].style.borderRight        = "1px dotted #8d8d8d";
container[i].style.backgroundColor    = "#8d8d8d";
container[i].style.backgroundImage    = "url(../l_p.jpg)";
container[i].style.backgroundRepeat   = "no-repeat";
container[i].style.backgroundPosition = "5px 5px";
    }

for (var i = 0; i < ueberschrift.length; i++)
    {
ueberschrift[i].style.fontSize        = "19px";
ueberschrift[i].style.fontWeight      = "normal";
ueberschrift[i].style.marginTop       = "35px";
ueberschrift[i].style.marginLeft      = "25px";
  }

for (var i = 0; i < ul_element.length; i++)
    {
    ul_element[i].style.listStyleType     = "none";
ul_element[i].style.marginLeft        = "26px";
}

for (var i = 0; i < li_element.length; i++)
    {
    li_element[i].style.fontSize          = "18px";
li_element[i].style.color             = "#003275";
li_element[i].style.lineHeight        = "17px";
}

for (var i = 0; i < fett.length; i++)
    {
    fett[i].style.fontSize                = "24px";
fett[i].style.color                   = "#000";
fett[i].style.marginLeft              = "8px";
}
</script>
<title>Unbenanntes Dokument</title>
</head>
<body>
 <div id="a_2">
        <h2>7 Tage Angebot</h2>
        <ul>
          <li>VW Passat </li>
          <li>7 Tage für  <strong>€329,-</strong></li>
        </ul>
        <img id="bild_2" src="vw_passat.png" alt="VW Passat" />
  </div>
</body>
</html>

[Sipatshi]

Hallo nochmal,

wenn ich den Code rein-paste sieht es nicht so schön aus! Kann man das ändern?

Gruß

Sipatshi

[ChrisB]

Hi,

wenn ich den Code rein-paste sieht es nicht so schön aus! Kann man das ändern?

Du meinst, wie du ihn hier im Forum formatiert darstellen lassen kannst?

MfG ChrisB

[Der Martin]

Hallo,

Zeile 7: container is Null. Wird nichts übergeben? Oder was kann ich darunter verstehen?

zu der Zeit, da das Script ausgeführt wird, existiert der Rest des Dokuments noch gar nicht. Notiere das ganze Script entweder unterhalb des HTML-Bereichs (z.B. am Ende von body), oder lass es erst "onload" ausführen.

Ciao,
 Martin

[ChrisB]

Hi,

Zeile 7: container is Null. Wird nichts übergeben? Oder was kann ich darunter verstehen?

Ah, da bist du jetzt in eine der üblichen Anfänger-Stolperfallen getappt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
    var container                         = document.getElementById("a_2");

Zu dem Zeitpunkt ist noch gar kein Element mit der ID a_2 vorhanden - das folgt ja erst später im Quellcode der Seite.

Das umgehst du, in dem du entweder dein Script weiter nach unten setzt, (frühestens) ab der Stelle, wo das Element im Quelltext steht; oder aber, in dem du den Code in eine Funktion kapselst, und diese dann Aufrufen lässt, wenn die Seite komplett fertig geladen (onload), oder zumindest das DOM vollständig erstellt ist (Stichwort DOMContentReady)

(Ob ggf. noch weitere Fehler drin sind, habe ich jetzt nicht geschaut.)

MfG ChrisB

[Sipatshi]

Hallo,

ob ich den Code ganz nach unten setze wie in diesem beispiel: http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name oder es verlagere, es funktioniert nicht obwohl doch alles identisch ist. Desweiteren habe ich wieder ein Fehler in der Fehlerkonsole: ul_element.getElementTagName is not a function! Ist doch richtig geschreiben.

Wieso dann noch DOMContentReady? Was passiert genau dort(DOMContentReady)?

Es ist zum heulen wenn man newbie ist :-(

Mein Code(verlagert)

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="functions2.js"></script>
<title>Unbenanntes Dokument</title>
</head>
<body onload="testfunc()">
 <div id="a_2">
        <h2>7 Tage Angebot</h2>
        <ul>
          <li>VW Passat </li>
          <li>7 Tage für  <strong>€329,-</strong></li>
        </ul>
        <img id="bild_2" src="vw_passat.png" alt="VW Passat" />
  </div>
</body>
</html>

Javascript

function testfunc(){

var container                         = document.getElementById("a_2");
    var ueberschrift                      = container.getElementsByTagName("h2");
    var ul_element                        = container.getElementsByTagName("ul");
    var li_element                        = ul_element.getElementsByTagName("li");
    var fett                              = li_element.getElementByTagName("strong");
/*var bild                            Ein Tip wie ich das Bild mit einbeziehen kann */

for (var i = 0; i < container.length; i++)
    {
    container[i].style.cssFloat           = "left";
    container[i].style.width              = "273";
    container[i].style.height             = "273";
container[i].style.borderRight        = "1px dotted #8d8d8d";
container[i].style.backgroundColor    = "#8d8d8d";
container[i].style.backgroundImage    = "url(../l_p.jpg)";
container[i].style.backgroundRepeat   = "no-repeat";
container[i].style.backgroundPosition = "5px 5px";
    }

for (var i = 0; i < ueberschrift.length; i++)
    {
ueberschrift[i].style.fontSize        = "19px";
ueberschrift[i].style.fontWeight      = "normal";
ueberschrift[i].style.marginTop       = "35px";
ueberschrift[i].style.marginLeft      = "25px";
  }

for (var i = 0; i < ul_element.length; i++)
    {
    ul_element[i].style.listStyleType     = "none";
ul_element[i].style.marginLeft        = "26px";
}

for (var i = 0; i < li_element.length; i++)
    {
    li_element[i].style.fontSize          = "18px";
li_element[i].style.color             = "#003275";
li_element[i].style.lineHeight        = "17px";
}

for (var i = 0; i < fett.length; i++)
    {
    fett[i].style.fontSize                = "24px";
fett[i].style.color                   = "#000";
fett[i].style.marginLeft              = "8px";
}
}

Gruß

Sipatshi

[ChrisB]

Hi,

Desweiteren habe ich wieder ein Fehler in der Fehlerkonsole: ul_element.getElementTagName is not a function! Ist doch richtig geschreiben.

Es ist in etwa so richtig geschrieben, wie du „geschrieben” gerade richtig geschrieben hast ...

getElementByTagName - vergleiche doch mal die Schreibweisen an den Stellen, wo du diese Funktion benutzen willst.

MfG ChrisB

[Sipatshi]

Hallo,

Es ist in etwa so richtig geschrieben, wie du „geschrieben” gerade richtig geschrieben hast ..

ich habs gesehen :-( Nachteile des zehnfinger tippens!

getElementByTagName - vergleiche doch mal die Schreibweisen an den Stellen, wo du diese Funktion benutzen willst.

hab ich auch gesehen: richtig ---> getElementsByTagName

Ich mach schluss für heute. Das war zuviel für mich. Muss erstmal meine gedanken trommeln.

Vielen Dank und schönen Abend.

Gruß

Sipatshi

[Gunnar Bittersmann]

@@Sipatshi:

nuqneH

wie kann ich folgenden CSS-Code in Javascript umsetzen?:

WARUM willst du das tun?

Lies: Es ergibt vermutlich keinen Sinn. Darstellungsangaben gehören ins Stylesheet, nicht ins JavaScript.

Was ist dein Problem, das du mit einer Krücke zu lösen gedachtest? Vermutlich gibt es eine saubere Lösung dafür.

Qapla'