javascript - javascriptインクリメント（++以上）スタイル属性

Question

divタグを。で移動するのに問題がありonclickます。一度動かすことはできますが、新しい変数を取得して再度追加する方法がわかりません。

jqueryを使用しないでください。現時点では、クロスプラットフォームについてはあまり心配していません。

function addToMargin()  {

        var marginleft = 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

#show-sessions  {
        margin-left:10px;
        width:200px;
        overflow:hidden;
}

数値を格納するグローバル変数を設定してみましたが、NaN

どんな助けでも大歓迎です...

score 5 · Accepted Answer

function addToMargin()  {  
        var marginleft 
            = parseInt(document.getElementById("show-sessions").style.marginLeft) + 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

score 3 · Accepted Answer

ゴロバル変数のことは悪い考えではありませんでした。次のようなことを試してください。

var margin = 20;
function addToMargin()  {
        margin ++; //or += value
        document.getElementById("show-sessions").style.marginLeft = margin + "px";
}

念のため、最初のマージンをインラインスタイルとして提供することもできます...

score 0 · Accepted Answer

function addToMargin(value)  {
    var element = document.getElementById("show-sessions");
    var marginleft = parseInt(element.style.marginLeft.replace('px', ''));
    element.style.marginLeft = (marginleft + value) + "px";
}

score 0 · Accepted Answer

将来の参照と研究のための私の貢献：

function addToLeft()  {  
    var left 
        = document.getElementById("show-sessions").clientLeft + 20;
    document.getElementById("show-sessions").style.Left = left + "px";

}

注1：これにより、marginleftではなく、左の位置が変更されます。

注2：戻り値は文字列ではなくintです。

score 0 · Accepted Answer

変数marginLeftは20のままであり、それが1回移動する理由です。あなたはおそらくこのようなことを達成しようとしていないのですか？

var marginLeft = 20;
var tot = document.getElementById("show-sessions").style.marginLeft;
document.getElementById("show-sessions").style.marginLeft = (tot + marginLeft) + "px"

score 0 · Accepted Answer

この方法を使用できますwindow.getComputedStyle()。そして、より良い抽象化のために再利用可能な関数を作成するかもしれません。何かのようなもの：

function move(el, val) {
    var style = window.getComputedStyle(el);
    el.style.marginLeft = parseInt(style.marginLeft) + val + "px";
}

window.onload = function () {
    document.getElementById("show-sessions").onclick = function (e) {
        move(this, 20);
    };
};

JSFiddleの例。

javascript - javascriptインクリメント（++以上）スタイル属性

6 に答える 6

Related

Reference