使用javascript精确定位图像

我需要创建几十个小图像，并将它们绝对定位在屏幕上相对于屏幕顶部和左侧的位置。我有一个带有一个div的页面，目前，我正在尝试使用javascript创建每个元素。如何精确定位每个元素

var divo = document.getElementById('pagediv');
var objImage = document.createElement('img');
objImage.setAttribute('src', 'images/Red_L.gif');
divo.appendChild(objImage);

---

这就是创建图像并将其显示在屏幕上。但是你怎么知道它确切的位置呢？

我想你应该看看。

“在特定的x/y坐标上”

为它设置CSS

var divo = document.getElementById('pagediv');
var objImage = document.createElement('img');
objImage.setAttribute('src', 'images/Red_L.gif');
objImage.style.top="100px";
objImage.style.left="100px";
objImage.style.zIndex=2;
objImage.style.position="absolute";
divo.appendChild(objImage);

---

如果您是动态创建图像，我相信您可以通过循环运行它并定位图像

    var divo = document.getElementById('pagediv');
    var leftPos = 0;
    var newSrc = '';
    for(i = 0 ; i < 12 ; i++)
    {
        newSrc = "images/red_"+i+".png";
        var objImage = document.createElement('img');
        objImage.src = newSrc;
        objImage.style.left=leftPos+20+"px";
        objImage.style.zIndex=2;
        objImage.style.position="absolute";
        leftPos = objImage.style.width;
        divo.appendChild(objImage);
    }

var divo=document.getElementById（'pagediv'）；
var-leftPos=0；
var newSrc=''；
对于（i=0；i<12；i++）
{
newSrc=“images/red_“+i+”.png”；
var objImage=document.createElement（'img'）；
objImage.src=newSrc；
objImage.style.left=leftPos+20+“px”；
objectjimage.style.zIndex=2；
objImage.style.position=“绝对”；
leftPos=objImage.style.width；
附加子对象（对象图像）；
}

---

如果您的图像被命名为

red_1.png、red_2.png

等等，此代码将以20像素的间距将图像一个接一个地放置。

使用

offsetTop

和

offsetLeft

可能会解决您的问题，但在某些浏览器中可能存在缺陷。我建议使用

getBoundingClientRect

获取并偏移每个图像的x/y坐标。

您是什么意思？在特定的x/y坐标或某个元素之后？如果你像这样设置位置，十几张图像不会被放置在彼此的顶部吗？@harsha我当然希望OP足够聪明，可以为每个图像设置顶部/左侧。