javascript - JavaScript を使用して上/左/下/右の値をインクリメントする

Question

たとえば、要素の位置をxピクセルずつインクリメントしようとしています。これが私がこれまでに試したことです：

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

これが機能しないことはわかっていますが、このように位置の値を増やすことができるかどうか疑問に思っていました。

Answer 1

は、数値部分だけを実際の数値に変換する場合にのみ計算できるstyle.topように、末尾に単位を含む文字列であるためです。"300px"

top位置付けられた要素があり (値を設定すると何かが行われる)、topCSS を介して設定されていないスタイルが要素に直接設定されていると仮定すると(取得obj.style.topすると実際に何かが取得されます)、数値を解析することでそれを行うことができます。次のようなスタイル値の

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

作業例: http://jsfiddle.net/jfriend00/pt46X/

Answer 2

topたとえば、値が の場合、200pxになるため、うまくいきません"200px300px"。これを試して：

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

デモ WEEEE!!!!