Bagaimana untuk menyelaraskan kandungan teks menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menyelaraskan kandungan teks menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-24 11:09:06

ke hadapan

4398 orang telah melayarinya

如何使用 JavaScript 将文本内容居中对齐？

Kami boleh menggunakan JavaScript untuk menjajarkan kandungan teks ke tengah dengan memanipulasi sifat CSS elemen. Ini boleh dilakukan dengan memilih elemen dan menetapkan sifat "text-align" kepada "center". Selain itu, kita juga boleh menggunakan atribut "margin" untuk melaraskan kedudukan elemen.

Kaedah

Terdapat banyak cara untuk memusatkan kandungan teks menggunakan JavaScript -

Kaedah yang paling biasa ialah menetapkan sifat text-align kepada "center" dalam lembaran gaya CSS.
Cara lain ialah menggunakan tag
. Akhir sekali, anda boleh menggunakan sifat margin untuk memusatkan kandungan teks.

Contoh

Di bawah kita akan melihat kod ke teks tengah menggunakan JavaScript sahaja.

<html>
<head>
   <title>JavaScript - Center Text</title>
</head>
   <body>
      <script> 
         const centerText = () => {    
            var centerText = document.createElement('p');
            centerText.innerText = 'Center Text';
            centerText.style.color = 'black';
            centerText.style.textAlign = 'center';
            document.body.appendChild(centerText);
         } 	 
         centerText();
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh

Mari lihat satu lagi contoh kandungan teks penjajaran tengah -

<!DOCTYPE html>
<html>
<head>
   <title>
      Align Text
   </title>
</head>  
   <body>
      <h1>Demo Heading</h1> 
      <p id="demo">
         This text will be center aligned
      </p> 
      <button onclick="demoFunc();">Align</button> 
      <script>
         function demoFunc() {
            let txt = document.getElementById("demo");
            txt.style.textAlign = "center";
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan kandungan teks menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!