0

我正在尝试使用 javascript 更改我在 HTML 中的图像的位置。如果我有以下代码，我实际上可以让它工作：

function main()
{
    var catOne = document.getElementById("cat1");
    catOne.style.left = cat1.getX().toString() + "px";
    catOne.style.top = cat1.getY().toString() + "px";
}

但是当我将代码更改为此：

var catOne = new Cat("cat1", 300, 100);

function main()
{

    catOne.setUp();
}

它不起作用。而且我不知道为什么，但它只给了我一个错误“TypeError：无法读取null的属性'style'”

这是我在 javascript 中的 Cat 类：

function Cat(id, x, y)
{
    this.cat = document.getElementById(id);
    this.x = x;
    this.y = y;
}

Cat.prototype.setUp = function ()
{
    this.cat.style.left = this.x.toString() + "px";
    this.cat.style.top = this.y.toString() + "px";
};

Cat.prototype.getX = function ()
{
    return this.x;
};

Cat.prototype.getY = function ()
{
    return this.y;
};
4

2 回答 2

1

TypeError: Cannot read property 'style' of null表示您catOne在 DOM 树中不存在。

您应该在 DOM 准备好（或在窗口加载时）实例化 Cat 类。我不知道您为什么需要该main()功能，但它何时执行？它也应该在 DOM 准备好时执行。

var catOne;
function main() {
    catOne.setUp();
}

window.onload = function() {
    catOne = new Cat("cat1", 300, 100);
    main();
}

我还建议你将position你的猫设置为，absolute如果你在你的setUp()函数中定位它。（我想你已经用你的 CSS 做到了）：

Cat.prototype.setUp = function ()
{
    this.cat.style.position = 'absolute';
    this.cat.style.left = this.x.toString() + "px";
    this.cat.style.top = this.y.toString() + "px";
};

这是小提琴。
除此之外，您的代码应该可以工作。

于 2013-01-31T17:56:20.027 回答
0

和：

var catOne = new Cat("cat1", 300, 100);
catOne.setUp();

工作得很好。

我不太明白你是如何设法得到错误你提到的

链接：http: //jsfiddle.net/Z74mM/

于 2013-01-31T13:50:33.380 回答