Die Position zweier Elemente tauschen

[molily]

ich möchte die Position zweier Elemente per Javascript tauschen.

Das ist nicht so einfach, du musst erst die bestehenden Koordinaten auslesen. Damit du die auf verschiedene Art setzen kannst, musst du die berechneten Werte auslesen. Das geht in verschiedenen Browsern verschieden. Bzw. es gibt eine standardisierte Methode und eine Methode für den nicht-standardkonformen IE. Dabei hilft diese Funktion:

function getCurrentStyle (element) {  
 if (window.getComputedStyle) {  
  return window.getComputedStyle(element, null);  
 } else if (element.currentStyle) {  
  return element.currentStyle;  
 }  
}

Sie gibt ein style-Objekt zurück, deren Eigenschaften die gegenwärtigen Werte wiedergeben (in <http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=dieser Schreibweise>, darunter top und left).

Die entsprechende Vertausch-Funktion:

function vertauschen (e1, e2) {  
 var style = getCurrentStyle(e1);  
 var koordinaten1 = {  
  top : style.top,  
  left : style.left  
 };  
 style = getCurrentStyle(e2);  
 var koordinaten2 = {  
  top : style.top,  
  left : style.left  
 };  
 style = e1.style;  
 style.top = koordinaten2.top;  
 style.left = koordinaten2.left;  
 style = e2.style;  
 style.top = koordinaten1.top;  
 style.left = koordinaten1.left;  
}

Beispiel:

CSS:

#e1, #e2 {  
 margin:0;  
 position:absolute;  
 background-color:green;  
}  
#e1 {  
 top:150px;  
 left:150px;  
}  
#e2 {  
 top:400px;  
 left:400px;  
}

HTML:

<p id="e1">element1</p>  
<p id="e2">element2</p>

JavaScript:

window.onload = function () {  
 vertauschen(document.getElementById("e1"), document.getElementById("e2"));  
};

Mathias