Bagaimana untuk memusatkan elemen dalam javascript

Untuk pembangun bahagian hadapan, pemusatan adalah salah satu keperluan biasa. Dalam reka bentuk web, pemusatan elemen halaman biasanya boleh dicapai melalui CSS. Tetapi dalam beberapa kes, JavaScript juga boleh digunakan untuk menetapkan pemusatan elemen.

Artikel ini akan memperkenalkan beberapa kaedah JavaScript biasa dan cara menggunakannya untuk memusatkan elemen.

1. Gunakan JavaScript untuk memusatkan div

Dalam pembangunan web, salah satu elemen yang paling biasa ialah teg div. Berikut ialah cara untuk memusatkan teg div secara mendatar dan menegak menggunakan JavaScript.

var div = document.getElementById('myDiv');
div.style.position = 'absolute';
div.style.top = '50%';
div.style.left = '50%';
div.style.transform = 'translate(-50%,-50%)';

Pertama, gunakan getElementById untuk mendapatkan rujukan kepada elemen div yang anda mahu pusatkan. Kemudian, tetapkan sifat kedudukan div kepada kedudukan mutlak. Seterusnya, gunakan ciri atas dan kiri CSS untuk meletakkan div ke tengah bekas induknya. Akhir sekali, gunakan sifat ubah CSS untuk mengalihkan separuh div lebar dan tingginya sendiri ke atas dan kiri supaya ia berpusat.

2. Memusatkan teks menggunakan JavaScript

Dalam sesetengah kes, teks perlu dipusatkan, bukan elemen. Di bawah ialah kaedah JavaScript untuk memusatkan teks.

var text = document.getElementById('myText');
text.style.textAlign = 'center';
text.style.display = 'flex';
text.style.justifyContent = 'center';
text.style.alignItems = 'center';

Pertama, dapatkan rujukan kepada unsur bentuk unsur teks. Seterusnya, gunakan sifat CSS textAlign untuk memusatkan teks secara mendatar. Kemudian, tetapkan sifat paparan elemen teks kepada flex untuk menggunakan reka letak flexbox. Pusatkan elemen teks secara mendatar dan menegak menggunakan ciri justifyContent dan alignItems CSS.

3. Gunakan JavaScript untuk memusatkan imej

Akhir sekali, jika elemen yang anda mahu pusatkan ialah imej, anda boleh menggunakan kaedah JavaScript berikut.

var img = document.getElementById('myImg');
img.style.position = 'absolute';
img.style.top = '50%';
img.style.left = '50%';
img.style.transform = 'translate(-50%,-50%)';

Gunakan pertama getElementById untuk mendapatkan rujukan elemen img yang anda mahu pusatkan. Kemudian, tetapkan sifat kedudukan imej kepada kedudukan mutlak. Gunakan ciri atas dan kiri CSS untuk meletakkan imej ke tengah bekas induknya. Akhir sekali, gunakan sifat transformasi CSS untuk mengalihkan imej ke atas dan ke kiri dengan separuh lebar dan tingginya supaya ia berpusat.

Ringkasan

JavaScript ialah cara untuk memusatkan elemen dan ia boleh menjadi sangat berguna dalam situasi tertentu. Dalam artikel ini, kami merangkumi tiga kaedah JavaScript untuk mencapai pemusatan elemen. Kaedah ini mungkin berbeza untuk jenis elemen yang berbeza untuk dipusatkan. Tetapi dengan menggunakan kaedah ini, anda akan dapat memastikan bahawa halaman web anda kelihatan hebat pada peranti dan skrin yang berbeza, dan elemen sentiasa berpusat.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan elemen dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!