0

我有一个简单的 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();
    }
})();

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

4

1 回答 1

1

问题是线路

marker = document.getElementById("marker");

markermap不像您的代码所期望的那样解析为您的对象的属性；相反，它解析为全局对象的属性。但是，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);
    },
于 2013-05-22T14:15:44.637 回答