Nicht dazu in der Lage div.Stil.Links und div.Stil.top-css-Eigenschaften via JavaScript

Lief ich in ein sehr verwirrendes problem heute

Habe ich eine Leinwand, und ein div-Element, wie dies

<canvas id="canvas" width="800" height="400"></canvas>
<div id="xy"></div>

Ich dann die Eigenschaften der div-Element über eine css-Datei, z.B. mit position:absolute und display:none
Dann Schreibe ich die X/Y-Position in das div per JS und versuchen, die Eigenschaften der div so, dass der div-folgt der Maus herum, wie diese

var div = document.getElementById("xy");
var x = e.pageX - this.offsetLeft - 1;
var y = e.pageY - this.offsetTop - y0 - 0.5;
div.style.display = "block";
div.style.left = e.pageX + 25;
div.style.top = e.pageY -10;
div.style.backgroundColor = "#f00";

Das lustige an der Sache ist jetzt: ich kann die Anzeige-und Hintergrundfarbe, ohne ein problem, aber die left und top Eigenschaften nicht funktionieren. Wenn ich löschen meine DOCTYPE-Deklaration in meine HTML-Datei zwar, ich kann ändern Sie die left und top Eigenschaften ohne Probleme. Arbeiten ohne doctype ist außer Frage, natürlich.
Mache ich etwas, was nicht getan werden sollte oder etwas fehlt ganz offensichtlich?

  • Was ist "e" im code? edit oh, das ist ein event-handler.
InformationsquelleAutor Ramon Wenger | 2012-04-27
  1. 11

    Haben Sie vergessen "px":

    div.style.left = (e.pageX + 25) + 'px';
div.style.top = (e.pageY -10) + 'px';

    Vielleicht möchten Sie auch hinzufügen div.style.position = "absolute";

    Wenn Sie denken, es gibt jede chance, dass e.pageX oder e.pageY werden strings statt zahlen werfen ein parseInt in:

    div.style.left = (parseInt(e.pageX, 10) + 25) + 'px';
div.style.top = (parseInt(e.pageY, 10) - 10) + 'px';
    • +1, aber Ihre parseInt ist unnötig, oder, wenn erforderlich, hat die Endung ) an der falschen Stelle. Ich glaube e.pageX ist schon eine Nummer, aber wenn es irgendeine chance es nicht, Sie wollen = (parseInt(e.pageX, 10) + 25) + 'px'; (Hinweis: ich habe auch die radix drauf. Sie fast immer sagen wollen parseInt konkret, was radix zu verwenden.)
    • ja, aber es ist eine verkettete Zeichenfolge es ist sicherer. Ich persönlich bevorzuge :). (okay, für die radix, verwende ich jetzt :))
    • Mein Punkt ist, dass das, was dort aktiv ist falsch, nicht, dass es nicht ideal. Wenn e.pageX ist ein string (z.B. "10"), dann parseInt(e.pageX + 25) wird 1025, nicht 35, weil beim hinzufügen einer Zahl zu einem string, wird die Zahl in text umgewandelt und angehängt: jsbin.com/ekiwup
    • das war es eben. mein Kopf traf gerade meinen Schreibtisch auf eine hohe Geschwindigkeit. danke sehr 😉 was ich bereits versucht hatte, war die + 'px', aber es darf nicht " ein "' in es, ich erkannte, gerade jetzt
    • Ja, es ist wahr, danke T. J. Crowder
    • die parseInt ist auch gar nicht notwendig, es funktioniert nur mit (e.pageX + 25) + 'px'
    • Ja, das ist, was ich gesagt habe oben. pageX und pageY sind schon zahlen.
    • Ich habe Feste die parseInt

    InformationsquelleAutor ke20
  2. 0

    Andere Methode für die Einstellung der Stil-Eigenschaften wie die DIV-Objekte, die mithilfe der setProperty-Methode

    Können Sie prüfen, unter Javascript-code-Beispiel

    document.getElementById('div').style.setProperty("top","100px");
    InformationsquelleAutor Eralper
  3. 0

    Ich vor demselben problem, aber wenn ich fügte hinzu, ein Platz in der leeren div, es begann Positionierung richtig. also

    div.innerHTML = &nbsp;&nbsp;
    InformationsquelleAutor Kulbhushan Chaskar
Schreibe einen Kommentar