2012-08-24 15 views
13

たとえば、xピクセルで要素の位置を増やそうとしています。ここで私はこれまで試したものです:JavaScriptを使用して上/左/下/右の値を増やす

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

私はこれが仕事に行くのではありませんが、このような位置の値をインクリメントすることが可能であった場合、私は思っていたことを知っています。

+2

をなぜこれがdownvotedでしたか?これは完全に有効な質問です。 – Brad

答えて

11

style.topは、"300px"のように、数字の部分だけを実際の数字に変換するときには、数値の部分を持つ文字列です。

あなたが配置要素(そう何かを行いますtop値を設定する)を持っていると仮定し、すでにtopスタイルはCSSを介して設定された要素の上に直接設定していない、することができます(そう、実際に何かを取得しますobj.style.top取得)このようなスタイル値のうちの数を解析することによってそれを行う:

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

の作業例:top200pxの値を持っていたならば、それは希望、例えば、ため正常に動作しませんhttp://jsfiddle.net/jfriend00/pt46X/

+0

私は小さなコードを入力しました:http://jsfiddle.net/wLf35/ここでエラーを見つけることはできません。 – day0

+1

@ day0 - 私の答えで言ったように、 'obj.style.top'はCSSで設定された値を取得しません。あなたのスタイルがCSSを介して設定されている場合、クロスブラウザ版の 'window.getComputedStyle()'を使う必要があります。 'obj.style.top'は、(CSSではなく)オブジェクト上で直接設定されたスタイル値だけを取得します。 jsFiddleでは、関数がグローバルスコープにあり、呼び出す方法に到達できるように、コードをheadまたはbodyに設定する必要もあります。こちらをご覧ください:http://jsfiddle.net/jfriend00/CG68f/ – jfriend00

+0

ああ、それは素晴らしいです!どうもありがとうございました。どこでも '.getComputedStyle()'に出くわしたわけではありませんでした。再度、感謝します! – day0

2

〜になる"200px300px"。このお試しください:

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

Demo WEEEE!!!!

+0

メイクストップ!!! – BNL