IE7 css块相对位置与Javascript错误

IE7 css block relative position with Javascript bug

本文关键字：Javascript 错误 位置 相对 css IE7      更新时间：2023-09-26

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

您可以查看这里的代码http://jsfiddle.net/rayshinn/6DGfb/

这段代码似乎在Chrome和Firefox上运行良好，除了IE7。

我从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();
    }
})();

感谢您花时间阅读这篇文章并帮助我解决这个问题。一如既往，任何建议将不胜感激!

问题出在

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);
    },
相关文章：