Bagaimana untuk melaraskan margin atas elemen anak secara automatik berdasarkan ketinggian elemen induk?
P粉086993788
P粉086993788 2024-04-02 13:49:19
0
1
361

Saya menghadapi masalah dengan peperiksaan kolej lama. Pada asasnya ia memerlukan:

Dapatkan fail json ini

[
    {"colore": "#FF0080", "pos_orizz": 10, "pos_vert": 30},
    {"colore": "#800080", "pos_orizz": 30, "pos_vert": 40},
    {"colore": "#808000", "pos_orizz": 50, "pos_vert": 50},
    {"colore": "#408080", "pos_orizz": 60, "pos_vert": 60},
    {"colore": "#C0C0C0", "pos_orizz": 30, "pos_vert": 50}
]

Buat fungsi yang melukis div segi empat sama dalam "utama" (elemen induk) menggunakan data yang terkandung dalam fail json.

Saiz div ialah: 10% x 10% daripada port pandangan; Kedudukan dan warna latar belakang ditentukan dalam fail json (kedudukan ialah peratusan berbanding saiz utama)

Saya telah melakukan segala-galanya, tetapi apabila saya menggunakan spesifikasi gaya pada div saya, margin-top adalah dalam peratusan berbanding lebar elemen induk... yang menyebabkan semua jenis isu limpahan

async function crea(){

    const response = await MyFetch();
    
    const main = document.querySelector("main");

    response.forEach(element => {

        let div = document.createElement("div");

        div.style.width = "10vh";
        div.style.height = "10vh";
        div.style.backgroundColor = element.colore;
        **div.style.marginTop  = element.pos_vert+"%";**
        div.style.marginLeft  = element.pos_orizz+"%";

        main.appendChild(div);

    });

}

Ini adalah fungsi saya, saya pasti ada perkara yang boleh saya lakukan untuk menjadikannya berfungsi, saya harap saya telah jelas dalam rumusan soalan saya

P粉086993788
P粉086993788

membalas semua(1)
P粉505450505

Ini ialah coretan sampel yang menunjukkan CSS yang digunakan untuk melukis div segi empat sama pada elemen induk. Dalam demo ini, saya telah menetapkan kedudukan dalam CSS, tetapi anda perlu menetapkannya dalam JavaScript.

div {
  height: 300px;
  width: 300px;
  background: gray;
}
div div {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background: orange;
}
<div>A<div>B</div></div>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!