Question

所以我创建了一个图片代码，但我也希望能够为通过我下面的javascript创建的图片代码设置属性

function start()
        {
            imageTag = document.createElement("IMG"); //Creates image tag
            w = window.innerWidth //finds width of web page
            h = window.innerHeight //finds height of web page
            pic = document.getElementsByTagName("img"); //finds the tag name of "img"
            x = Math.floor(Math.random()*(w))+1; //finds a random width that can be used for x coordinate that fits within site
            y = Math.floor(Math.random()*(h))+1; //finds a random height that can be used for y coordinate that fits within site
            pic.style.left = x+"px"; //Sets the style attribute that will be in the image tag that was created earlier *ERROR*
            pic.style.top = y+"px"; //Sets the style attribute that will be in the image tag that was created earlier *ERROR*
            imageTag.setAttribute("src", "popo.jpg" ); //sets the image tags source
            document.body.appendChild(imageTag);
        }

我似乎无法弄清楚为什么左边和上边的样式属性没有像创建的图片标记中的其他图片源属性那样添加。如果我已经在html中有了一个图片标签，那么它可以正常工作，但是当我在javascript中创建一个图片标签时，这是没有意义的，因为我觉得它应该有效。

Answer 1

通过保留对最后创建的图像的引用来使您受益，这样您就可以轻松设置位置属性。

例如

var prevImage;

function start() {
    if (prevImage) {
        var x = Math.floor(Math.random() * window.innerWidth) + 1,
            y = Math.floor(Math.random() * window.innerHeight) + 1;            

        prevImage.style.left = x + 'px';
        prevImage.style.top = y + 'px';
    }
    var img = document.createElement('img');
    img.src = 'popo.jpg';
    document.body.appendChild(img);
    prevImage = img;
}

创建图像元素，然后通过javascript错误设置样式属性

1 个答案: