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 nullcatOneDOMツリーにあなたが存在しないことを意味します。

DOMの準備ができたとき（またはウィンドウのロード時）にCatクラスをインスタンス化する必要があります。なぜその関数が必要なのかわかりませんmain()が、いつ実行されますか？また、DOMの準備ができたときに実行する必要があります。

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

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

また、関数内で猫をそのように配置する場合positionは、猫のをに設定することをお勧めします。（CSSですでにこれを行っていると思います）：absolutesetUp()

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 に答える