Border-left in JS

[Marc]

Hallo,

scheinbar stelle ich mich zu doof an:

Ich möchte ein DIV mit Schatten erstellen, wo die Schattenrichtung durch zwei Variablen bestimmt wird:

tt_border_x = 'right';
tt_border_y = 'bottom';

Der Schatten wird erzeugt durch ein zweites Div, dass direkt über dem Original-DIV liegt und nur einen breiteren Rahmen hat (kosmetisch verfeinert wird später).

Wie kann ich nun in diesem DIV den enstsprechenden border ansprechen?

[Ashura]

Hallo Marc.

tt_border_x = 'right';
tt_border_y = 'bottom';

[…]

Wie kann ich nun in diesem DIV den enstsprechenden border ansprechen?

Variablen in JS haben die Eigenart, dass sie im Grunde nur Eigenschaften eines Objektes sind.
Obige Variablen könntest du also folgendermaßen ausgeben lassen:

alert(tt_border_x);  
alert(window.tt_border_x);  
alert(window['tt_border_x']);

(Davon ausgehend, dass du ohne eigene Objekte arbeitest.)

Besonders die dritte Variante ist für dich interessant. Du siehst, wie die Variable dort einfach per Zeichenkette angesprochen wird? Das ist dein Ansatzpunkt.
Ein jedes HTML-Elementobjekt hat ein style-Unterobjekt, an welches die dir (vermutlich) bekannten Eigenschaften gekoppelt sind.
So kannst du den rechten Rahmen des allerersten div-Elementes wie folgt festlegen:

document.getElementsByTagName('div')[0].style.borderRight = '1px solid #f00';

_Aber auch_ so:

document.getElementsByTagName('div')[0].style['borderRight'] = '1px solid #f00';

Siehst du, wo du nun ansetzen kannst? Du solltest im Übrigen „Right“ an Stelle von „right“ und „Bottom“ an Stelle von „bottom“ schreiben, da du dir damit viel Arbeit ersparst, um den ersten Buchstaben in einen Großbuchstaben umzuwandeln.
Solltest du weitergehende Informationen suchen, solltest du zuallererst Christian Kruses Feature-Artikel zu diesem Thema lesen.

Einen schönen Sonntag noch.

Gruß, Ashura

[Marc]

Ich habe es eben mit dem Array probiert - hat super funktioniert.

Vielen Dank