0

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

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

那就是创建图像并把它放在屏幕上。但是你怎么能准确地告诉它定位在哪里呢？

4

4 回答 4

0

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

于 2012-10-05T15:26:33.180 回答
0

“在特定的 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);
于 2012-10-05T15:41:52.237 回答
0

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

    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。

于 2012-10-05T16:04:35.877 回答
0

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

于 2012-10-05T16:21:40.720 回答