0

数十の小さな画像を作成し、画面の上部と左側を基準にして画面上に絶対に配置する必要があります。1 つの 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

http://www.quirksmode.org/js/findpos.htmlを使用するoffsetTopとoffsetLeft、問題が解決する可能性がありますが、一部のブラウザではバグが発生する可能性があります。http://ejohn.org/blog/getboundingclientrect-is-awesome/を使用して、各画像のx/y座標を取得およびオフセットすることをお勧めします。getBoundingClientRect

于 2012-10-05T16:21:40.720 に答える
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

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 に答える