Re: document.getElementById("element").style.(left|top)

Lorenz Gorse wrote:
> Code:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"
lang="de">

Du brauchst hier kein XHTML; HTML 4.01 (mÃ¶glichst Strict)
genÃ¼gt und ist
auch kompatibler.

> <head>
>
>      <title>Titel</title>

<http://www.w3.org/QA/Tips/good-titles>

>      <script language="javascript"
type="text/javascript">

Das language-Attribut ist deprecated, was anscheinend der einzige Grund hier
ist, Transitional statt Strict zu deklarieren.  Du brauchst das nicht.

Ausserdem hast Du <http://www.w3.org/TR/xhtml1/#h-4.8> und
<http://www.w3.org/TR/xhtml1/#C_4> nicht beachtet.

>          var x;
>          var y;

Diese Variablen mÃ¼ssen und sollten hier nicht global deklariert werden.

>          function init()
>          {
>              document.captureEvents(Event.MOUSEMOVE);

Das ist Netscape 4-proprietÃ¤r und daher veraltet.

<http://developer.mozilla.org/en/docs/DOM:document#Methods>

>              document.onmousemove = pos;

Das ist auch proprietÃ¤r ("DOM Level 0").  Standardkonform ist und
von
Firefox 3 Beta/RCx ganz sicher verstanden wird:

document.addEventListener("mousemove", pos, true);

`true', weil die vorherige Anweisung vermuten lÃ¤sst, dass Du den Event
capturen willst; andernfalls mÃ¼sstest Du `false' schreiben.

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListene
r>

>          }

Nach Korrektur besteht die Methode dann nur noch aus einer Anweisung, daher
ist es vermutlich sinnvoller, dann gleich

<body onload="document.addEventListener('mousemove', pos, true);">

zu schreiben, denn dann spartest Du Dir auch das script-Element und die
Querelen in XHTML damit.  Die Standard-Script-Sprache solltest Du dann
allerdings per meta-Element angeben.

>          function pos(e)
>          {
>              x = e.clientX;
>              y = e.clientY;

Ersetzen durch

var x = e.clientX;
var y = e.clientY;

Alternativ sinnvoll:

// Object-Objekt
var coords = {x: e.clientX, y: e.clientY};

oder

// Array-Objekt
var coords = [e.clientX, e.clientY];

>              var variable = x+","+y;

Besser:

var inhalt = x + "," + y;

Alternativ:

// Object-Objekt
var inhalt = coords.x + "," + coords.y;

oder

// Array-Objekt
var inhalt = coords.toString();

Noch besser: ÃœberflÃ¼ssige Variable weglassen.

>              document.getElementById('text').innerHTML = variable;

Besser:

document.getElementById('text').innerHTML = inhalt;

Alternativ:

document.getElementById('text').innerHTML = coords.x + "," + coords.y;

oder

document.getElementById('text').innerHTML = coords.toString();

Jedoch:

`innerHTML' ist proprietÃ¤r.  Mittels Zuweisung an `nodeValue' oder
`textContent' kannst Du den Textinhalt eines Elements standardkonform
setzen.  Firefox 3 unterstÃ¼tzt beides.

Hier genÃ¼gt jedoch bereits ein Formularsteuerelement, welches Du mit per
Zuweisung an document.forms[...].elements[...].value fÃ¼llen kannst.

>              document.getElementById('text').style.left = x+"px";
>              document.getElementById('text').style.top = y+"px";

Das ist ineffizient und fehlertrÃ¤chtig.  Stattdessen:

var target = document.getElementById('text');
if (target)
{
// bzw. siehe oben
target.innerHTML = variable;
target.style.left = x + "px";
target.style.top = y + "px";
}
else
{
// DEBUG
window.alert("Das Element mit der ID `text' gibt es nicht!");
}

Und wie von Sascha schon angemerkt, bewirken Deklarationen von `left' und
`top', mithin Zuweisungen an style.left und style.top ohne die Deklaration
von `position' != static, mithin die Zuweisung an style.position !
"static", genau gar nichts.  Das ist aber *CSS*-Basiswissen.

>          }
> [...]
> Die Zuweisung von left und top klappt nicht.

http://glasgoogle.de/
http://getfirebug.com/

> Mit anderen Eigenschaften, wie zum Beispiel font-famiy klappt es.

Die haben wahrscheinlich nichts mit der Positionierung zu tun.

> Ich benutze Firefox 3.

Der AFAIK frÃ¼hestens am Dienstag (PST) released wird.  Du benutzt also eine
Betaversion, und dÃ¼rftest Dich nicht wundern, wenn etwas nicht
funktioniert.
Sofern Du den neuesten Release Candidate benutzt *und* Fehler Deinerseits
ausschliessen kannst, hÃ¤ttest Du somit noch die Chance, das Release oder
dessen Nachfolger per Bugreport zu verbessern :)


HTH

PointedEars
--
Clientseitig geht das nicht wirklich, weil der Browser selbst keine
Mails verschicken kann und das Kooperieren mit Mailprogrammen eher
in ein Kollabieren entartet.
(Georg MaaÃŸ in dcljs <aoh6vi$mbrnu$4@ID-3551.news.dfncis.de>)
[ Auf dieses Posting antworten ]