我做了一些代码来更改图像位置

该代码只能运行一次,但第二次将无法运行。

function prev() {
                    if(document.getElementById("bookCon").style.left=="0px"){}
                    else {
                        document.getElementById("bookCon").style.right-="800px";
                    }
                }
                function next() {
                    if(document.getElementById("bookCon").style.left=="5000px") {}
                    else {
                        document.getElementById("bookCon").style.right+="800px";
                    }
                }


第二版...也行不通。

function getStyleNum(item,prop) {
            if (typeof item == "string") { item = document.getElementById(item); }
            return parseInt(item.style[prop],10);
        }
        function prev() {
            var item = document.getElementById("bookCon");
            if (getStyleNum(item,"right") !== 0) {
                var val = getStyleNum(item, "right");
                item.style.right = (val - 800) + "px";
            }
        }
        function next() {
            var item = document.getElementById("bookCon");
            if (getStyleNum(item,"right") !== 1600) {
                var val = getStyleNum(item, "right");
                item.style.right = (val + 800) + "px";
            }
        }

最佳答案

您的代码存在多个问题:


您不能使用+= "800px",因为这些字符串是字符串,因此最终会出现"500px800px"之类的内容。
您不能对字符串进行数学运算。
您无法可靠地与"0px"进行比较
您检查.left的值并设置.right的值。您应该只使用其中之一,而不要同时使用两者。
您的代码可以进行更多的DRY(不重复执行)
直接在对象上读取style属性不会包含通过样式表设置的任何内容


如果style.left值是直接在对象上设置的(最初不是来自样式表)并且定位了对象,则可以使用这种类型的逻辑(转换为数字)。我不知道您到底想通过检查.left然后更改.right来完成什么,所以这只是您的逻辑猜测,但是您应该能够了解如何进行这种排序的一般想法的东西。

function prev() {
    var item = document.getElementById("bookCon");
    if (parseInt(item.style.left, 10) != 0) {
        var val = parseInt(item.style.right, 10) || 0;
        item.style.right = (val - 800) + "px";
    }
}


您可能会发现此util函数有用:

function getStyleNum(item, prop) {
    if (typeof item == "string") {
        item = document.getElementById(item);
    }
    return parseInt(item.style[prop], 10) || 0;
}

function prev() {
    var item = document.getElementById("bookCon");
    if (getStyleNum(item, "left") != 0) {
        var val = getStyleNum(item, "right");
        item.style.right = (val - 800) + "px";
    }
}


附言我仍然不明白为什么您要检查.left的值然后修改.right的值。在给定的时间,其中只有一个可以处于活动状态。

工作演示:http://jsfiddle.net/jfriend00/awjv9/

关于javascript - 无法使用javascript函数更改图像位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19962409/

10-12 00:22
查看更多