Question

我有一个简单的JS脚本，当给出一个值时，它会在特定路径上移动一个CSS块。

您可以在此处查看代码http://jsfiddle.net/rayshinn/6DGfb/

除IE7外，此代码似乎在Chrome和Firefox上运行良好。

我从IE获得的错误如下

Line: 27  
Char:13  
Error: Object doesn't support this property or method  
Code: 0  
URL: http://localhost/test/js/plot.js

第27行如下

    marker = document.getElementById("marker");
    this.setPosition(INITIAL_X, INITIAL_Y);

以下是我的完整JS脚本供您参考。

(function () {
    var INITIAL_X = 550,
        INITIAL_Y = 152;

    // f(v) -> {"x" : x, "y" : y}
    var calculatePosition = function (value) {
        var result = {};

        result.x = INITIAL_X -  value / 9;
        result.y = INITIAL_Y + 0.117  * value/ 9 ;


        return result;
    }

    var map = {
        marker : null,
        value : 0,

        setPosition : function (x, y) {
             marker.style.left = x + "px";
             marker.style.top  = y + "px";
        },

        init : function () {
            marker = document.getElementById("marker");
            this.setPosition(INITIAL_X, INITIAL_Y);
        },

        increment : function () {
            this.value++;
            var result = calculatePosition(this.value);
            this.setPosition(result.x, result.y);
        },

        decrement : function() {
            this.value--;
            var result = calculatePosition(this.value);
            this.setPosition(result.x, result.y);
        }
    };

    map.init();

    for (var i  = 0; i < 100; i++) {
        map.increment();
    }
})();

感谢您抽出宝贵时间阅读本文并帮助我解决此问题。一如既往，任何建议将不胜感激！

Answer 1

问题在于

行

marker = document.getElementById("marker");

marker无法解析为map对象的属性，因为您的代码似乎期望;相反，它解析为全局对象的属性。但是，IE使用其名称对应于页面中元素ID的属性填充全局对象，然后不允许您覆盖这些属性。这意味着在IE中已经存在无法覆盖的全局marker。

这是为什么应避免使用像marker这样的隐含全局变量的一个很好的理由。最简单的解决方法是将对marker的引用更改为this.marker：

    setPosition : function (x, y) {
         this.marker.style.left = x + "px";
         this.marker.style.top  = y + "px";
    },

    init : function () {
        this.marker = document.getElementById("marker");
        this.setPosition(INITIAL_X, INITIAL_Y);
    },

IE7 css阻止Javascript错误的相对位置

1 个答案: