2016-08-16 5 views
1

Ich bin ein Anfänger in CSS/HTML. Danke fürs Lesen!relative/absolute Position CSS (konvertieren Bereich Element rect-Koordinaten)

Ich habe eine Reihe von Flächenelementen (Rechtecke). Hier in Javascript bezieht sich "das" auf jedes Flächenelement - ich weise jedem der Flächenelementkoordinaten die relevante Variable zu (links, oben, rechts, unten). Ich möchte diese Koordinaten in das CSS-Div-Format konvertieren, aber ich bleibe bei der Syntax hängen. Derzeit haben die Flächenelemente (die als Divs angezeigt werden) die richtige Breite und Höhe, aber die falsche Position auf dem Diagramm. Ich möchte, dass sie an der gleichen Stelle stehen wie die Flächenelemente.

Irgendwelche Vorschläge werden sehr geschätzt!

   var offset = this.coords; 
       var coordarray = offset.split(","); 
       var left = coordarray[0]; 
       var top = coordarray[1]; 
       var right = coordarray[2]; 
       var bottom = coordarray[3]; 
       var ident = this.id; 
       var w = right - left; 
       var h = bottom - top;  

       var elementDiv = $('<div class="area"></div>') 
        .css({position: 'absolute', left: left px, top: top px, border: 'solid'}). //help with this line! 
        width(w).height(h); 
       $("body").append(elementDiv); 
       elementDiv.hide(); 

Antwort

3

CSS erwartet Prozentsätze oder Pixel, und JS gibt nur den numerischen Wert zurück. Sie müssen 'px' oder '%' an die Werte anhängen, die Sie in den Variablen left, top, right und bottom vars speichern.

+0

Vielen Dank! – FSS

+0

@ FSS du bist willkommen. Schauen Sie sich die MDN-Dokumente für CSS und JS an und denken Sie daran, genau zu beobachten, was die Dinge als Input erwarten :) – mchandleraz