Rumah > Artikel > hujung hadapan web > Apa yang berpusat dalam javascript
Apa yang berpusat dalam javascript
- WBOYasal
- 2023-05-29 11:30:082231semak imbas
Sebagai salah satu kemahiran penting untuk pembangunan bahagian hadapan, JavaScript mempunyai pelbagai "helah kecil" untuk menambah baik penampilan halaman web. Apabila mereka bentuk halaman web, kita selalunya perlu memusatkan elemen, termasuk teks, imej, bingkai dan banyak lagi. Pemusatan JavaScript ialah satu cara untuk mencapai proses ini.
Prinsip pemusatan JavaScript adalah untuk mendapatkan lebar dan ketinggian halaman, kemudian mengira kedudukan pemusatan berdasarkan saiz dan kedudukan elemen yang akan dipusatkan, dan kemudian melaraskan kedudukan elemen untuk dipaparkan ia di tengah. Terdapat banyak kaedah pelaksanaan khusus Di bawah ini kami akan memperkenalkannya satu per satu dan menerangkan perbezaan, kelebihan dan keburukan setiap kaedah.
Kaedah 1: Gunakan reka letak gaya CSS untuk mencapai
Pertama, kita perlu menetapkan gaya CSS elemen untuk dipusatkan, letakkannya sebagai kedudukan mutlak dan tetapkan kiri dan atasnya sifat kepada 50%, yang akan menterjemahkan elemen ke kanan dan ke bawah supaya ia dijajarkan di tengah halaman. Walau bagaimanapun, anda perlu memberi perhatian kepada menetapkan nilai margin negatif pada masa ini untuk melaraskan kedudukan elemen.
Pelaksanaan kod khusus adalah seperti berikut:
<style>
.center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*元素宽度的一半*/
margin-top: -50px; /*元素高度的一半*/
width: 200px;
height:100px;
}
</style>
<div class="center">这是要居中的元素</div>Kaedah 2: Gunakan elemen jadual HTML untuk mencapai
Anda juga boleh menggunakan teg jadual dalam HTML untuk mencapai kesan pemusatan . Dalam jadual, letakkan dua meja kosong yang sama lebarnya di kiri dan kanan elemen yang akan dipusatkan untuk menduduki ruang baki meja. Dalam kaedah ini, tidak perlu menggunakan helaian gaya CSS dan skrip JavaScript, jumlah kod adalah agak kecil, dan ia sesuai untuk mengendalikan beberapa isu pemusatan yang mudah.
Pelaksanaan kod khusus adalah seperti berikut:
<table width="100%" height="100%"> <tr> <td align="center" valign="middle"> 这是要居中的元素 </td> </tr> </table>
Kaedah 3: Gunakan skrip bahasa JavaScript untuk melaksanakan
Akhir sekali, kita boleh menggunakan bahasa JavaScript untuk mencapai pemusatan, yang mempunyai lebih baik Fleksibiliti dan kebolehsesuaian boleh digunakan untuk menangani masalah pemusatan dalam pelbagai situasi.
Pelaksanaan kod khusus adalah seperti berikut:
<script>
function centerDiv() {
var div = document.getElementById('TestDiv');
div.style.position = 'absolute';
div.style.top = (document.documentElement.clientHeight - div.offsetHeight) / 2 + 'px';
div.style.left = (document.documentElement.clientWidth - div.offsetWidth) / 2 + 'px';
}
</script>
<body onresize="centerDiv()">
<div id="TestDiv">
这是要居中的元素
</div>
</body>Kaedah pelaksanaan ini memerlukan pelaksanaan fungsi centerDiv() selepas halaman dimuatkan Fungsi utama fungsi adalah untuk mendapatkan lebar dan ketinggian skrin dan lebar serta ketinggian elemen itu sendiri, kemudian Buat pengiraan dan laraskan kedudukan.
Ringkasan:
Ketiga-tiga kaedah di atas semuanya mempunyai kelebihan dan skop penggunaannya yang tersendiri. Pembangun boleh memilih kaedah yang paling sesuai untuk memusatkan elemen berdasarkan keadaan tertentu, yang bukan sahaja memastikan fleksibiliti dan penyesuaian, tetapi juga mencapai kesan visual yang terbaik. Pada masa yang sama, beberapa butiran perlu diberi perhatian semasa pelaksanaan, seperti keserasian dengan pelayar yang berbeza dan sebagainya. Adalah perlu untuk memahami sepenuhnya dan menguji pelbagai kaedah sebelum digunakan untuk mengelakkan masalah tambahan yang disebabkan oleh isu keserasian.
Atas ialah kandungan terperinci Apa yang berpusat dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!