Javascript style.left爲空字符串

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應該返回一個整數？Javascript style.left爲空字符串

來源

2012-05-15 benhowdle89

如果您想輕鬆獲取這些值，請使用jQuery。它有各種方法來獲取元素的位置 - 以像素爲單位的數字，不管CSS使用什麼單位。 – ThiefMaster

這是爲什麼？

大概是因爲它沒有設置任何東西。

是不是style.left應該返回一個整數？

不。它應該返回一個字符串，它包含直接在元素上設置的CSS left屬性的值（通過設置JS屬性本身或通過使用樣式屬性）。它沒有從級聯中獲得一個值，如果值爲0，它應該只是一個整數（因爲所有其他長度都需要單位）。

請參閱How to get computed style of a HTMLElement如果您想獲取屬性的計算值，而不是前面段落中所述的值。

來源

2012-05-15 23:07:14 Quentin

您鏈接的答案爲我提供了另一個點擊鏈接。精彩。你能否在你的答案中包含相關的代碼位？ –

@ElliotBonneville-這裏是相關的[W3C參考]（http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle）和相關的[MDN參考] （https://developer.mozilla.org/en/DOM/window.getComputedStyle）。這在合理的搜索引擎中花費了大約30秒。 – RobG

@RobG：很酷，謝謝。比兔子的鏈接更好。 :-) –

style提供了從CSS計算出的原始樣式，而不是更新後的樣式，也可能是動態樣式。您可能需要currentStyle。

來源

2012-05-15 23:07:23

只是一個評論。

在您的代碼：

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

在第一線的分裂是多餘的，在第二行parseInt將轉換（說）10px以同樣有效數量10（和更有效）比你有。

pos = parseInt(el.style[direction], 10);

來源

2012-05-15 23:16:39 RobG

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。這裏是a way使它跨瀏覽器，但是當通過JS應用樣式時，這是一個很好的情況，某種框架（例如Prototype [Scriptaculous]，jQuery）會有用。

來源

2012-05-15 23:21:39 vol7ron

Javascript style.left爲空字符串

回答

相關問題