使用javascript精确定位图像

Question

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

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

这样就可以正常创建图像并将其显示在屏幕上。 但是，您如何准确地知道它的位置呢？

Answer 1

我想您应该看看CSS绝对定位 。

Answer 2

“在特定的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);

Answer 3

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

    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);
    }

如果您的图片分别命名为red_1.png,red_2.png等，则此代码会将图片彼此相邻，并且彼此之间的间距为20px。

Answer 4

使用offsetTop和offsetLeft可能会解决您的问题http://www.quirksmode.org/js/findpos.html-但在某些浏览器中可能会出错。 我建议使用getBoundingClientRect http://ejohn.org/blog/getboundingclientrect-is-awesome/来获取和偏移每个图像的x / y坐标。