Question

我正在尝试使用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”

这是我在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;
};

Answer 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";
};

Here是小提琴除此之外，您的代码应该有效。

Answer 2

使用：

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

工作正常。

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

link：http://jsfiddle.net/Z74mM/

javascript - 无法更改图片的位置

2 个答案: