2 
next.onclick = function() { 
    move('left', li_items[0]);
};

var move = function(direction, el) {
    pos = el.style[direction].split('px')[0];
    pos = parseInt(pos, 10) + 10; 
    el.style[direction] = pos + 'px';
};

上記の単純なコードを使用して、要素を移動しようとしています。これでブレークポイントを設定すると、の値el.style[direction]は:" "です。それで何かしようとすると壊れてしまいます。これはなぜでしょうか？style.left整数を返すことになっていませんか？

4

4 に答える 4

5

これはなぜでしょうか？

おそらく、何も設定されていないためです。

style.left は整数を返すはずではありませんか?

いいえ。CSS の left プロパティの値を含む文字列を要素に直接設定して返す必要があります (JS プロパティ自体を設定するか、style 属性を使用して)。カスケードから値を取得せず、値が 0 の場合のみ整数にする必要があります (他のすべての長さには単位が必要なため)。

前の段落で説明したものではなく、プロパティの計算された値を取得する場合は、HTMLElement の計算されたスタイルを取得する方法を参照してください。

于 2012-05-15T23:07:14.103 に答える
0 
next.onclick = function() { 
    move('left', li_items[0]);
};

var move = function(direction, el) {
    var lft = document.defaultView.getComputedStyle(el)[direction];
    pos = parseFloat(lft);
    pos = parseInt(pos, 10) + 10; 
    el.style[direction] = pos + 'px';
};

注:エリオットが言ったように、currentStyle/computedStyle を取得する必要があります。クロスブラウザーにする方法は次のとおりですが、JS を介してスタイルを適用する場合は、ある種のフレームワーク (Prototype [Scriptaculous]、jQuery など) が役立つ 1 つの良い例です。

于 2012-05-15T23:21:39.520 に答える
0

style更新された動的なスタイルではなく、CSS から計算された元のスタイルを提供します。currentStyleおそらく代わりに欲しいでしょう。

于 2012-05-15T23:07:23.603 に答える
0

ただのコメント。

あなたのコードで：

> pos = el.style[direction].split('px')[0];
> pos = parseInt(pos, 10) + 10;

最初の行の分割は不要です.2行目では、あなたが持っているものと同じくらい効果的に（そしてより効率的に）数値にparseInt変換します（たとえば） 。10px10

pos = parseInt(el.style[direction], 10);
于 2012-05-15T23:16:39.323 に答える