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 absolute positioning。

Answer 2

＆＃34;在特定的x / y坐标处＆＃34;

为它设置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坐标。

完全使用javascript定位图像

4 个答案: