Zusammenhang DOM/CSS/HTML

[Tom Bombadil]

Hallo ich habe mal ein paar Verständnisfragen zu den verschiedenen Konzepten im Web.

Am besten am Beispiel:

Ich habe ein HTML Element, dass ich mittels style definiere, so:

  
<iframe src= "EMPTY_IFRAME.htm" name="COLUMNS" id="COLUMNS" frameborder="0"  scrollinge=no style="width=290;height=240">IFRAME  
</iframe>  

Jetzt versuche ich die Ausmaße wieder auszulese, und zwar mit JS und der DOM-Struktur:

  
  alert(document.getElementById("COLUMNS").width);  

Hier wird nichst ausgegeben. Wenn ich in den iframe-TAG noch ein "HTML-width" hinzufüge, dann klappts. Aber wenn nicht, dann wird das aus dem CSS-style befehl nicht übernommen.

1. Frage wie stehen CSS und DOM zueinander. Wie überlagern diese sich gegebenfalls. Kann ich CSS-style Elemente beeinflussen bzw. dynamisch setzen?

Das wäre auch meine 2. Frage: Wenn ich das outerHTML-Attribut eines DOM-Objektes verändere z.B.

  
  <div name="div1"></div>  

wird mit

  
  document.getElementById("div1").outerHTML = "<div name="div2"></div>"  

gesetzt. Wird der neue Name nicht in das DOM übernommen. Wie stehen diese Tags mit dem DOM in Verbindung bzw. werden diese abgeglichen, und wenn ja wann?

Ich hoffe ihr könnt mir wenigstens ein wenig Erleuchtung bringen

MFG

Tom

[minicrispie]

Hallo Tom,

<iframe src= "EMPTY_IFRAME.htm" name="COLUMNS" id="COLUMNS" frameborder="0"  scrollinge=no style="width=290;height=240">IFRAME
</iframe>

  
Wozu in gottes namen hast du ein name und ein id attribut !?!?!  
  
  

> 1. Frage wie stehen CSS und DOM zueinander. Wie überlagern diese sich gegebenfalls. Kann ich CSS-style Elemente beeinflussen bzw. dynamisch setzen?  

Nein, sie überlagern sich nicht. Du kannst per Javascript auf css-style zugreifen.  
  

> Das wäre auch meine 2. Frage: Wenn ich das outerHTML-Attribut eines DOM-Objektes verändere z.B.  
>   
> ~~~html
  

>   <div name="div1"></div>  
> 

wird mit

document.getElementById("div1").outerHTML = "<div name="div2"></div>"

  
Wozu heist die Methode "getElementById" wenn du damit versuchst, das name-Attribut aufzurufen --> Das geht nicht und ist falsch.  
  

> Ich hoffe ihr könnt mir wenigstens ein wenig Erleuchtung bringen  

Ich habs versucht ;)  
  
  
MfG. Christoph

-- 
Wo die Sprache aufhört, fängt die Musik an...  
Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)  
  
Go to [this](http://home.arcor.de/minicrispie/index.html) or Go to [this](http://home.arcor.de/provochlud/index.html)

[suit]

Wozu in gottes namen hast du ein name und ein id attribut !?!?!

das name-attribut dient dazu, um um das frame zb über das target-attribut ansprechen zu können

[minicrispie]

Hallo suit,

Wozu in gottes namen hast du ein name und ein id attribut !?!?!

das name-attribut dient dazu, um um das frame zb über das target-attribut ansprechen zu können

dann würd ich es aber bei dem name-Attribut belassen und die Elemente mit getElementByName ansprechen...

P.S.: wieso heißt du eigentlich suit ? hast du nen anzug an (nur mal so aus neugier xD)
MfG. Christoph

[suit]

P.S.: wieso heißt du eigentlich suit ? hast du nen anzug an (nur mal so aus neugier xD)

es hat in der tat etwas mit anzug zu tun ja ;) - der name leitet sich vom gman (eine figur aus dem half-life universum) ab

[minicrispie]

Hallo,

es hat in der tat etwas mit anzug zu tun ja ;) - der name leitet sich vom gman (eine figur aus dem half-life universum) ab

Das soll jetz keine Beleidigung sein oder so, aber die aussprache von em typen klingt irdendwie schwul:

<aussprache style="So wie ich es spreche">
gay-män
</aussprache>

xD

MfG. Christoph

[Kai345]

[latex]Mae  govannen![/latex]

P.S.: wieso heißt du eigentlich suit ? hast du nen anzug an (nur mal so aus neugier xD)

Das heißt:

s hift
u nbenutzt
i n
t astatur

;)

Cü,

Kai

[suit]

alert(document.getElementById("COLUMNS").width);

>   
> Hier wird nichst ausgegeben. Wenn ich in den iframe-TAG noch ein "HTML-width" hinzufüge, dann klappts. Aber wenn nicht, dann wird das aus dem CSS-style befehl nicht übernommen.  
  
weil width als attribut nicht existiert im dom - es existiert lediglich ein attribut mit dem namen style und dem wert "width=290;height=240" - was übrigens ungültiges css ist, da die einheiten fehlen  
  
was du suchst, ist verm. das hier  
<http://de.selfhtml.org/javascript/objekte/style.htm>

[Tom Bombadil]

alert(document.getElementById("COLUMNS").width);

> >   
> > Hier wird nichst ausgegeben. Wenn ich in den iframe-TAG noch ein "HTML-width" hinzufüge, dann klappts. Aber wenn nicht, dann wird das aus dem CSS-style befehl nicht übernommen.  
>   
> weil width als attribut nicht existiert im dom - es existiert lediglich ein attribut mit dem namen style und dem wert "width=290;height=240" - was übrigens ungültiges css ist, da die einheiten fehlen  
>   
> was du suchst, ist verm. das hier  
> <http://de.selfhtml.org/javascript/objekte/style.htm>  
  
Ich denke das hilft mir schon weiter. Vielen Dank.  
  
Wenn es ein style-Objekt gibt, dann wäre ja der Zusammenhang DOM CSS geklärt.  
  
Bleibt noch die Frage nach dem outerHTML bzw. innerHTML.  
  
Mein Beispiel ist eine Liste mit Checkboxen. Zu jeder Checkbox gibt es 2 Buttons, einen "UP-Button" und eine "DOWN-Button". Wenn man diese drückt, dann soll das aktuelle Element mit dem darüberliegenden bzw. darunterliegenden vertauscht werden. Dazu muß insbesondere der Text, der neben jedem Button steht getauscht werden.  
  
Vom Prinzip funktioniert das auch. Meine Frage ist eine Verständnisfrage. Beeinflußt die innerHTML Eigenschaft das DOM.  
  
also  
  
beliebigesObjekt.innerHTML = "<input type=checkbox name="1" value="zunächst">"  
  
Wird hier nun ein neues input-Element in den DOM-Baum eingebracht?  
  
und wnn ich nun folgendes schreibe:  
  
selbesObjektwieOben.innerHTML = "<input type=checkbox name="1">  
value="neu">"  
  
Verändert das das DOM?  
  
Vielen Dank für Eure Antworten  
Gruß  
  
Tom  
  
  
  
  
  
  
  

[MudGuard]

Hi,

weil width als attribut nicht existiert im dom - es existiert lediglich ein attribut mit dem namen style und dem wert "width=290;height=240" - was übrigens ungültiges css ist, da die einheiten fehlen

Auch mit Einheiten wird es nicht klappen, da das Trennzeichen zwischen Eigenschaft und Wert falsch ist (= statt :)

cu,
Andreas

[suit]

Auch mit Einheiten wird es nicht klappen, da das Trennzeichen zwischen Eigenschaft und Wert falsch ist (= statt :)

recht hast du - ich kann kaum noch klar denken, ich schwitz mich hier noch zu tode - und nebenbei bemerkt: ich hasse microsoft xmldom :)

[MudGuard]

Hi,

ich schwitz mich hier noch zu tode

Keine leeren Versprechungen ;-)

cu,
Andreas

[suit]

ich schwitz mich hier noch zu tode
Keine leeren Versprechungen ;-)

das war keine versprechung, aber ich bemüh mich ja eh - nur geduld :D

[EKKi]

Mahlzeit Tom Bombadil,

Ich habe ein HTML Element, dass ich mittels style definiere, so:

<iframe src= "EMPTY_IFRAME.htm" name="COLUMNS" id="COLUMNS" frameborder="0"  scrollinge=no style="width=290;height=240">IFRAME
</iframe>

  
Nein, so nicht. Eher <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=so>.  
  
  

> Jetzt versuche ich die Ausmaße wieder auszulese, und zwar mit JS und der DOM-Struktur:  
>   
> ~~~javascript
  

>   alert(document.getElementById("COLUMNS").width);  
> 

Hier wird nichst ausgegeben.

Natürlich nicht. Einerseits befindet sich die Eigenschaft "width" innerhalb des http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objektes, andererseits kann natürlich nur etwas ausgelesen werden, wenn auch korrekt ein Wert festgelegt wurde (s.o.).

Wenn ich in den iframe-TAG noch ein "HTML-width" hinzufüge, dann klappts. Aber wenn nicht, dann wird das aus dem CSS-style befehl nicht übernommen.

Doch, sobald Du es richtig machst, klappt's. Und Breitenangaben mittels HTML-Attributen solltest Du nicht verwenden: HTML stellt nur die Struktur dar, für das Layout ist CSS zuständig.

Das wäre auch meine 2. Frage: Wenn ich das outerHTML-Attribut eines DOM-Objektes verändere z.B.

Ein DOM-Objekt besitzt kein http://de.selfhtml.org/javascript/objekte/all.htm#outer_html@title=outerHTML-Attribut - dies ist Microsoft-Syntax und sollte nicht verwendet werden, wenn man standardkonforme Anwendungen schreiben will.

<div name="div1"></div>

>   
> wird mit  
>   
> ~~~html
  

>   document.getElementById("div1").outerHTML = "<div name="div2"></div>"  
> 

Warum so kompliziert? Dafür hat doch jedes benannte Element eine http://de.selfhtml.org/javascript/objekte/elements.htm#name@title=name-Eigenschaft ... abgesehen davon sollte jeder vernünftige Javascript-Parser bei einem Code auf die Schnauze fliegen - schau Dir mal die Anführungszeichen genauer an. :-)

MfG,
EKKi

[MudGuard]

Hi,

<div name="div1"></div>

> ~~~javascript
  

>   document.getElementById("div1").outerHTML = "<div name="div2"></div>"  
> 

gesetzt.

div hat gar kein name-Attribut, daher wird getElementsByName nicht funktionieren.
Aber selbst wenn es das name-Attribut für div gäbe: ein id-Attribut existiert nicht, also kann der Zugriff per getElementById nicht klappen.

cu,
Andreas