x-y koordinatlarına ve genişlik yüksekliğine göre birden çok html öğesi nasıl düzenlenir?

Question

HTML5'te, kullanıcı tarafından çeşitli ortam kurulumlarını yürütecek/gösterecek bir ekranım olacak bir dijital işaretleme uygulaması geliştiriyorum. Video, resim, widget, ticker vb. Gibi birden çok öğeye sahibim. X-y ekseni ve yükseklik/genişliğim var, bunları verilen bilgilere göre hassas bir şekilde düzenlemek istiyorum. Xml/json'da veri alacağım.

Düz CSS denedim, ancak beklendiği gibi çalışmıyor. SVG ve Canvas'ı denedim, ancak tüm html öğelerini desteklemiyorlar.

Answer 1

yapabilirsiniz Javascript'ten absolute kullanılarak sadece konum gösteren elemanlar:

function absElement(type, x, y, w, h) { 
    let d = document.createElement(type); 
    d.style.position = "absolute"; 
    d.style.left = x + "px"; 
    d.style.top = y + "px"; 
    d.style.width = w + "px"; 
    d.style.height = h + "px"; 
    document.body.appendChild(d); 
    return d; 
} 

Sonra

absElement("img", 100, 200, 400, 200).src = "myimage.jpg";