Programmierung in Javascript
|
Lesen und Schreiben der Positions-Daten erfolgt genauso wie bei jeder anderen
Eigsnchaft des style-Objekts. Allerdings sind einige
Punbkte zu beachten:
▲
Wenn einem Element im HTML-Quellcode die 3 style-Eigenschaften
position, left, top zugewiesen wurden, dann ist der Zugriff darauf
mit Javascript möglich.
Das gilt auch dann, wenn die Eigenschaften mit der document.write
Methode von Javascript oder mit DOM-Methoden festgelegt wurden.
|
▲
Wenn diese 3 Eigenschaften nicht definiert wurden,
dann sind sie unbestimmt. Von der Verwendung mit Javascript ist dann abzuraten.
▲
Wenn die style-Eigenschaft position
anfänglich festgelegt wurde, dann kann sie gelesen, aber nicht mehr geändert
werden. Die beiden Eigenschaften left
und top können beliebig geändert werden.
▲
Zur Identifikation eines DOM-Knotens wird in den Beispielen die
Methode getElementById verwendet,
die sich auf das id-Attribut eines HTML-Elements bezieht.
Alternativ kann jede andere Methode der Identifizierung verwendet werden.
(Details)
|
Lesen der Positions-Daten:
Die Beispiel-Funktion get_pos liest die 3 Positions-Daten
eines Elements und zeigt sie in einem Meldungs-Fenster an.
Voraussetzung: Diese 3 style-Eigenschaften wurden
vorher definiert.
Live- -Javascript
mit 3 verschiedenen Elementen dieser Webseite, identifiziert durch ihre
id-Attribute:
|
function get_pos(id) {
var t="Position ('"+id+"'):";
var n=document.getElementById(id);
var p=n.style.position;
t+="\nposition = "+p;
var x=n.style.left;
t+="\nleft = "+x;
var y=n.style.top;
t+="\ntop = "+y;
var z=n.style.zIndex;
t+="\nz-index = "+z;
alert(t);
}
|
Schreiben der Positions-Daten:
Die Beispiel-Funktion reset_pos überschreibt vorhandene
Positions-Daten und setzt das angesprochene Element an den Ursprung
seiner position-Koordinaten.
|
function reset_pos(id) {
var n=document.getElementById(id);
n.style.left="0px";
n.style.top="0px";
}
|
Änderung der Positions-Art:
Es ist möglich, diese Eigenschaft zu ändern. Dabei bleiben jedoch die
CSS-Eigenschaften left und top erhalten,
d.h. das Element springt dabei an einen anderen Platz. Ändern sie daher
Positions-Art und Koordinaten - wenn überhaupt - nur gemeinsam.
|
n=document.getElementById(id);
alert("position="+n.style.position);
n.style.position="absolute";
n.style.position="relative";
|
Verschieben eines Elements:
Die Beispiel-Funktion move_pos überschreibt
vorhandene Positions-Daten, um ein Element um eine bestimmte
Strecke (dx,dy) zu verschieben.
Die beiden Argumente dx und dy
wurden evtl. als Text übergeben. Sie werden daher sicherheitshalber
mit parseInt in ganze Dezimalzahlen umgewandelt.
Die aktuellen Positions-Daten x,y werden gelesen:
Manche Browser liefern dabei Zahlen, andere Texte mit 'px'. Deshalb wird ein
allfälliger Text 'px' mit einem
→
Regulären Ausdruck entfernt, der Rest in eine Dezimalzahl umgewandelt.
Damit wird die neue Position berechnet.
Beim Schreiben von Positions-Daten fügen sie am besten die
↓ Einheit 'px'
dazu, das funktioniert mit allen gängigen Browsern.
♦ Sehen sie dazu auch die Beispiele auf
der Seite über CSS-Schichten.
|
function move_pos(id,dx,dy) {
var n=document.getElementById(id);
dx=parseInt(dx,10);
dy=parseInt(dy,10);
if(dx!=0) {
var x=n.style.left.replace(/px/,"");
x=parseInt(x,10)+dx;
n.style.left=x+"px";
}
if(dy!=0) {
var y=n.style.top.replace(/px/,"");
y=parseInt(y,10)+dy;
n.style.top=y+"px";
}
}
|
CSS
In diesem Beispiel soll die absolute Position des schwarzen Punkts bestimmt werden.
Der Punkt mit dem Attribut
Der MSIE Browser liefert in vielen Fällen nur die
unbrauchbare Aussage 'auto' 