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 属性本身或使用样式属性）。它不会从级联中获取值，并且如果值为 0，它应该只是一个整数（因为所有其他长度都需要单位）。

如果您想获取属性的计算值而不是我在上一段中描述的值，请参阅如何获取 HTMLElement 的计算样式。

于 2012-05-15T23:07:14.103 回答
0

style提供从 CSS 计算出来的原始样式，而不是更新的可能是动态的样式。你可能想要currentStyle。

于 2012-05-15T23:07:23.603 回答
0

只是一个评论。

在您的代码中：

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

第一行中的拆分是多余的，第二行中的拆分parseInt将（比方说）转换为与您所拥有10px的数字10一样有效（并且更有效）的数字。

pos = parseInt(el.style[direction], 10);
于 2012-05-15T23:16:39.323 回答
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';
};

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

于 2012-05-15T23:21:39.520 回答