Position und/oder Größe eines TAG-Controls zu Laufzeit ändern

[said]

hallo leute,

meine frage erübrigt sich eigentich bereits im titel dieses postings. also nochmals etwas ausführlicher:

betreffen darf diese sache eigentlich alle tag-controls bei html ( input, textarea, select, ... ). es geht darum, das einmal die position eines tagcontrol zur laufzeit verändert werden kann, mittels javascript wahlweise durch getelementbyid, getelementsbyname bzw. getelementsbytagname und einmal die größe.

also, wie kann ich mittels einer javascript-funktion garantieren, das die repositionierung des controls gewährleistet wird. dieser code hier funzt nitt:

weder in dieser:

function RePos(x,y) {
 document.getElementsByName("feld")[0].left = x;
 document.getElementsByName("feld")[0].top = y;
  }

noch in dieser version:

function RePos(x,y) {
 document.getElementsByName("feld")[0].style =
        "position:absolute;left:" + x + "px;top:" + y + ";";
  }

und als zweites würde ich gerne wissen, wie ich wiedermal mit einer javascript-funktion wiedermal wahlweise mit eines der getelement-methoden die width und height werte eines tagcontrols zur laufzeit manipulieren kann.

wäre echt dankbar für wirklich nützliche tipps

mfg
kurt

[Felix Riesterer]

Lieber Kurt,

Du hast die Verwendung des http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objekts noch nicht verstanden.

document.getElementsByName("feld")[0].left = x;

Das müsste heißen: document.getElementsByName("feld")[0].style.left = x + "px";

document.getElementsByName("feld")[0].style =
        "position:absolute;left:" + x + "px;top:" + y + ";";

Das geht so auch nicht. Du möchtest hier gleich drei CSS-Eigenschaften ändern, "position" und "top". Dazu musst Du zwei Anweisungen notieren:

function RePos(x, y, elm) {  
    // Das Element solltest Du dieser Funktion schon übermitteln, daher der dritte Parameter "elm".  
    if (elm) {  
        elm.style.position = "absolute";  
        elm.style.left = x + "px";  
        elm.style.top = y + "px";  
    }  
    return (elm != false); // Rückgabewert, ob's geklappt hat.  
}

wie ich [...] die width und height werte eines tagcontrols zur laufzeit manipulieren kann.

Tja, rate mal! Oder lies das gleich nochmal beim http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objekt nach!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Der Martin]

Hallo,

meine frage erübrigt sich eigentich bereits im titel dieses postings.

nicht wirklich, ich habe gerade angefangen zu rätseln, was du wohl mit einem "Tag Control" meinen könntest. Falls dich mal wieder jemand fragt: Die Dinger sind allgemein als Formularelemente bekannt.

es geht darum, das einmal die position eines tagcontrol zur laufzeit verändert werden kann, mittels javascript wahlweise durch getelementbyid, getelementsbyname bzw. getelementsbytagname und einmal die größe.

Kein Problem, und dein Ansatz ist auch schon gnz gut.

function RePos(x,y) {
document.getElementsByName("feld")[0].left = x;
document.getElementsByName("feld")[0].top = y;
  }

Dieser Codeausschnitt enthält zwei Denkfehler. Erstens hast du bei beiden Zuweisungen das style-Objekt vergessen (oder nicht gewusst, dass die Eigenschaften darin zusammengefasst sind), zweitens fehlt deinen CSS-Positionsangaben eine Einheit. Wenn du diese beiden Dinge ergänzt, sollte das funktionieren:

document.getElementsByName("feld")[0].style.left = x + "px";

function RePos(x,y) {
document.getElementsByName("feld")[0].style =
        "position:absolute;left:" + x + "px;top:" + y + ";";
  }

Das ist allerdings völlig daneben. Das style-Objekt entspricht zwar sinngemäß dem style-Attribut im HTML, speichert die Information aber nicht als String, sondern als aufgegliederte Objekteigenschaften.

und als zweites würde ich gerne wissen, wie ich wiedermal mit einer javascript-funktion wiedermal wahlweise mit eines der getelement-methoden die width und height werte eines tagcontrols zur laufzeit manipulieren kann.

Ich weiß nicht, ob ich dich richtig verstanden habe, denn der Satz ist etwas konfus. Aber vermutlich willst du genauso wie oben gezeigt die Eigenschaften width und height des style-Objekt ansprechen.

So long,
 Martin