Position als Variable

[Heinrich Wolf]

Guten Tag

In
<div style="position:absolute; top:110px; left:10px;">
möchte ich den top-wert 110px als Zufallswert eingeben,
der in einem <script> ermittelt und als var h1 vorliegt.

Es müsste also etwa heissen
<div style="position:absolute; top:(h1)px; left:10px;">
aber das funktioniert nicht.

Wie muss ich vorgehen?

Mit herzlichem Dank
Heinrich Wolf

[suit]

Wie muss ich vorgehen?

generiere das css mittels einer serverseitigen scriptsprache

[engel]

Guten Tag

In
<div style="position:absolute; top:110px; left:10px;">
möchte ich den top-wert 110px als Zufallswert eingeben,
der in einem <script> ermittelt und als var h1 vorliegt.

Es müsste also etwa heissen
<div style="position:absolute; top:(h1)px; left:10px;">
aber das funktioniert nicht.

Wie muss ich vorgehen?

Mit herzlichem Dank
Heinrich Wolf

Du kannst ganz einfach per Javascript auf die Werte im CSS zugreifen, und so deinen Wert ändern.

MfG

[Heinrich Wolf]

Engel schrieb:

Du kannst ganz einfach per Javascript auf die Werte im CSS zugreifen, und so deinen Wert ändern.

Vielen Dank, auch an suit!

Bin kein Routinier! Mein Infostand entspricht etwa
Selfhtml/css/eigenschaften/positionierung.htm
Anhand des ersten Beispiels finde ich wahrsch. den Weg mit dem CSS.

Auch mit JS habe ich schon einiges gebastelt,
aber ich wäre dankbar für einen Hinweis betr. Schreibzugriff auf das CSS.

Nachdem ich 5 individuell zu positioniere Elemente habe,
müsste ich wohl die betreffende CSS-Zeile für jedes Element
zuerst neu zusammensetzen, ins CSS hineinschreiben und dann das
zugehörige Element in die Seite schreiben.

Ist das einmal im Ansatz richtig?
Dankbar für einen Schuhlöffel!
HW

[suit]

Nachdem ich 5 individuell zu positioniere Elemente habe,
müsste ich wohl die betreffende CSS-Zeile für jedes Element
zuerst neu zusammensetzen, ins CSS hineinschreiben und dann das
zugehörige Element in die Seite schreiben.

ja, in etwa

ob du die betreffende deklaration als inline-css zusammensetzt und direkt per serverseitiger sprache schreibst (php bzw) oder zuerstmal irgend einen wert setzt und dann mit javascript nachher einen anderen zuweist ist prinzipiell egal

erstere variante wird bei jedem benutzer funktionieren, zweitere nur bei leuten mit javascript

die php variante könnte so aussehen

<style type="text/css">  
div {  
  position: absolute;  
  top: -100px;  
  left: -100px;  
  height: 100px;  
  width: 100px;  
  background: red;  
}  
<?php  
  $top_element1 = [link:http://at.php.net/rand@title=rand(50,100)];  
  $top_element2 = rand(50,100);  
  $top_element3 = rand(50,100);  
  $left_element1 = rand(50,100);  
  $left_element2 = rand(50,100);  
  $left_element3 = rand(50,100);  
  
  echo '#element1 { top: ' . $top_element1 . 'px; left: ' . $left_element1 . 'px; }' . "\n";  
  echo '#element2 { top: ' . $top_element2 . 'px; left: ' . $left_element2 . 'px; }' . "\n";  
  echo '#element3 { top: ' . $top_element3 . 'px; left: ' . $left_element3 . 'px; }' . "\n";  
?>  
</style>  
  
<div id="element1">1</div>  
<div id="element2">2</div>  
<div id="element3">3</div>

die links und hochwerte für #element1 bis 3 kannst du natürlich auch nachträglich mit javascript setzt

[Heinrich Wolf]

Vielen Dank, suit, für deine einlässliche Hilfe. Ehrlich, der (Denk-)Aufwand für eine flüchtige Idee ist mir zuviel. Ich habe da auch noch den 1000-Seiten-Flanagan liegen und darin ein 40-seitiges Kapitel zu DHTML gefunden... Vielleicht dienen deine Ausführungen ja doch einem Mitleser.
Mit freundlichem Gruss - Heinrich Wolf