2012-08-24 11 views
13

Ich versuche, die Position eines Elements von, sagen wir, zu erhöhen x Pixel. Hier ist, was ich bisher versucht:JavaScript verwenden oben/links/unten zu erhöhen/rechts Werte

var top = document.getElementById("something").style.top; 
top = top + "300px" 

Ich weiß, dass dies nicht zur Arbeit gehen, aber ich frage mich, ob es möglich war, einen Positionswert wie folgt zu erhöhen.

+2

Warum wurde dieses Downvoted? Das ist eine absolut gültige Frage. – Brad

Antwort

11

Da style.top ist eine Zeichenkette mit Einheiten am Ende der es wie "300px" Sie nur mit ihm Mathe tun können, wenn Sie nur den numerischen Teil eine tatsächliche Zahl konvertieren.

Vorausgesetzt, dass Sie ein positioniertes Element haben (so die Einstellung der top Wert wird etwas tun), und Sie haben bereits ein top Stil direkt auf das Element gesetzt und kann nicht über CSS gesetzt (so bekommen obj.style.top tatsächlich Sie etwas bekommen), können Sie tun es, indem die Zahl aus dem Stil Wert wie folgt Parsen:

var obj = document.getElementById("something"); 
var topVal = parseInt(obj.style.top, 10); 
obj.style.top = (topVal + 300) + "px"; 

Arbeitsbeispiel: http://jsfiddle.net/jfriend00/pt46X/

+0

Ich habe einen kleinen Code getippt: http://jsfiddle.net/wLf35/ Ich kann allerdings nicht hier, um die Fehler zu finden scheinen. – day0

+1

@ Tag0 - Wie ich in meiner Antwort sagte, 'obj.style.top' keinen Wert in CSS abzurufen. Sie müssen eine browserübergreifende Version von 'window.getComputedStyle()' verwenden, wenn Ihr Stil über CSS eingestellt ist. 'obj.style.top' ruft nur Stilwerte ab, die direkt auf dem Objekt gesetzt sind (nicht via CSS). Im jsFiddle, müssen Sie auch den Code gesetzt Kopf oder Körper zu sein, so dass Ihre Funktionen im globalen Bereich und werden so, wie Sie fordern sie erreichbar sein. Siehe hier: http://jsfiddle.net/jfriend00/CG68f/ – jfriend00

+0

Ah, das ist toll! Vielen Dank. Ich war nirgendwo auf '.getComputedStyle()' gestoßen. Danke noch einmal! – day0

2

das ist nicht in Ordnung arbeiten, weil zum Beispiel, wenn top einen Wert von 200px hatte, wäre es werden "200px300px". Versuchen Sie folgendes:

var elem = document.getElementById("something"); 
elem.style.top = parseInt(elem.style.top, 10) + 300 + "px" 

Demo WEEEE!!!!

+0

MACH ES STOPP !!! – BNL