Question

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应该返回一个整数？

Answer 1

为什么会这样？

大概是因为它没有被设定为任何东西。

不是style.left应该返回一个整数吗？

没有。它应该返回一个字符串，该字符串包含直接在元素上设置的CSS left属性的值（通过设置JS属性本身或使用style属性）。它没有从级联中获取值，如果值为0，它应该只是一个整数（因为所有其他长度都需要单位）。

如果您想获取属性的计算值而不是我在上一段中描述的值，请参阅How to get computed style of a HTMLElement。

Answer 2

style提供从CSS计算的原始样式，而不是更新的和可能的动态样式。您可能需要currentStyle。

Answer 3

只是评论。

在您的代码中：

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

第一行中的拆分是多余的，第二行parseInt会将（{）} 10px转换为数字10，就像您有效（并且更有效）一样有

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

Answer 4

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';
};

注意：就像Elliot说的那样你必须得到currentStyle / computedStyle。这里是a way使它跨浏览器，但是当通过JS应用样式时，这是一个很好的案例，其中某种框架（例如Prototype [Scriptaculous]，jQuery）将是有用的。

Javascript style.left是空字符串

4 个答案: