Javascriptでdiv位置を変更するには？

Question

だから、ここで私がこれまで持っているものです：私が欲しいものhttps://jsfiddle.net/625qofbe/1/

は、「約」のdiv、Loremのイプサムのテキストを含む、どのような「X」のシンボルでなければなりません（私はどのように知らないの位置のためでありますユーザーが左上の「About」ボタンをクリックしたときに、左に30ピクセル移動するために、画像をJSfiddleにリンクする（申し訳ありません）。ここに私がいることをやろうとしてきたのJavascriptです：

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = 30px; 
} 

私はグーグルでてきたし、年齢のために、このように成功した小さな実験に対してJavascriptを確認するには、何も働いていたんだと私は「何を見ることができませんここで間違っている。

最後の目標は、オフスクリーンの隠れたLoremテキストをユーザーがAboutをクリックしたときにスライドさせ、Xアイコンをクリックするとオフスクリーンでスライドさせることです。私は理論的にはそれがどういうことか分かっていたと確信していましたが、私はステップ1で悩まされました。

EDIT：ヘルプみんなのおかげで、しかし、両方のI /バック崇高テキストにコードを貼り付けコピーした場合にも動作しませんでしたJSfiddleにうまく働いた不気味2つのソリューション。しかし、私は、 "addEventListener"行を削除し、Aboutボタンのdivタグに "onclick = 'AboutOnScreen（）'"を追加することで、その問題を解決しました。 "addEventListener"行は、（Arindamが提案したように）ページソースをチェックしたときにエラー通知を送信したので、完全に削除しました。奇妙なことは、私が前にそれを試したことは確信しています。だから、このヘッドスクラッチャーの解決策は以下のすべての答えの合流点であることが判明しました。 @Rikardが述べたように

Answer 1

、次の操作を行います。作業スニペットを取得する必要があります

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = '30px'; 
} 

。 スライドアニメーションに関しては、CSS3（ブラウザサポートを前提とする）を使用して、ページのアニメーションをすばやく追加することができます。

CSS3アニメーションのための優れたリソースはhttp://www.w3schools.com/css/css3_animations.asp

幸運になると楽しみを持っているでしょう！

Answer 2

平野JSの要素の距離値のインラインスタイルを設定し、それが数値と文字列または文字列のコンボです。値は'430px'または430+'px'です。

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = 430 + 'px'; 
} 

あなたは要素から30pxが現在配置されているように、（少なくとも私に）解釈さ30px、左に移動すると述べました。したがって、left: 400pxだったので、左に30px移動すると値は430pxになります。

FIDDLE