Saya memiliki kode berikut:

let dynel = document.createElement('div');
dynel.className = 'foo';

dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';

document.body.appendChild(dynel);

Kode ini berfungsi seperti yang saya harapkan, setelah menambahkan elemen dinamis ke dokumen, kotak biru 5 x 5 muncul. Masalahnya dimulai ketika saya mencoba mengakses elemen melalui className untuk menatanya lebih lanjut:

var foo = document.getElementsByClassName('foo');

foo[0].style.top = '50px';
foo[0].style.left = '200px';

Kode ini harus memposisikan kotak tetapi tidak melakukan apa-apa, apa yang saya lakukan salah? Lebih disukai saya mencari solusi JS murni jadi tidak ada JQuery.

Terima kasih sebelumnya :)

2
krecik2000 9 Januari 2021, 14:39

2 jawaban

Anda perlu memastikan bahwa foo[0] memiliki set gaya position: absolute;.

1
Cody Gray 9 Januari 2021, 12:42

top, left, right, bottom bekerja pada elemen-elemen di mana properti position bukan static. Tetapi absolute atau relative atau fixed.

Sesuai kebutuhan Anda, gunakan salah satu dari 3 nilai dalam CSS Anda dan gaya akan mulai diterapkan. Sesuatu seperti ini akan berhasil (Tapi itu tergantung bagaimana Anda ingin mengimplementasikan kode)

var foo = document.getElementsByClassName('foo');

foo[0].style.position = "relative";
foo[0].style.top = '50px';
foo[0].style.left = '200px';

CATATAN: position:fixed dan position:absolute akan mengeluarkan elemen Anda dari aliran kode normal dan Anda harus menyesuaikannya.

0
Imran Rafiq Rather 9 Januari 2021, 12:20