Bagaimana untuk melaraskan saiz fon dalam javascript

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas yang boleh digunakan untuk melaksanakan pelbagai kesan dan fungsi interaktif dalam halaman web. Antaranya, melaraskan saiz fon adalah operasi biasa pada halaman web. Artikel ini akan memperkenalkan cara JavaScript melaraskan saiz teks dalam halaman web.

1. Gunakan operasi DOM untuk melaraskan saiz fon

DOM (Model Objek Dokumen) ialah bahagian penting dalam JavaScript dan digunakan untuk memanipulasi kandungan dalam halaman web. Melalui DOM, kita boleh mencari elemen yang saiz fonnya perlu diubah suai dengan mudah dan kemudian melaraskan saiznya menggunakan sifat .style.fontSize.

Pertama, kita perlu mencari elemen yang perlu diubah saiznya. Objek elemen yang perlu diubah suai boleh diperolehi oleh id atau kelas, contohnya:

<p id="paragraph">这是一个段落</p>
<p class="text">这是另一个段落</p>

Melalui kaedah getElementById dan kaedah getElementsByClassName dalam JavaScript, kita boleh mendapatkan dua objek elemen ini:

var p1 = document.getElementById("paragraph"); //获取id为paragraph的元素对象
var p2 = document.getElementsByClassName("text")[0]; //获取class为text的元素对象数组，取出第一个元素

Seterusnya, kita boleh mengubah suai saiz fon melalui sifat .style.fontSize:

p1.style.fontSize = "20px"; //将id为paragraph的元素的字体大小设置为20px
p2.style.fontSize = "16px"; //将class为text的元素的字体大小设置为16px

Dengan cara ini, kita boleh melaraskan saiz fon dengan mudah.

2. Gunakan perpustakaan jQuery untuk melaraskan saiz fon

jQuery ialah perpustakaan JavaScript popular yang memudahkan langkah pelbagai operasi dan menjadikan pengaturcaraan JavaScript lebih mudah dan ringkas. Menggunakan perpustakaan jQuery untuk melaraskan saiz fon mengurangkan jumlah kod dan serasi merentas pelayar.

Sebelum menggunakan perpustakaan jQuery, anda perlu memperkenalkan perpustakaan jQuery ke dalam halaman web:

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

Kemudian, kita boleh menggunakan pemilih dalam jQuery untuk mendapatkan elemen yang perlu mengubah suai fon saiz, seperti yang ditunjukkan di bawah :

$("#paragraph").css("font-size","20px"); //将id为paragraph的元素的字体大小设置为20px
$(".text").css("font-size","16px"); //将class为text的元素的字体大小设置为16px

Menggunakan perpustakaan jQuery, anda bukan sahaja boleh menggunakan kaedah .css untuk mengubah suai saiz fon, tetapi juga menggunakan kaedah .animate untuk mencapai kesan animasi yang lebih cantik. Contohnya:

$("#paragraph").animate({fontSize: "20px"}, 1000); //用1000毫秒的时间将id为paragraph的元素的字体大小调整为20px
$(".text").animate({fontSize: "16px"}, 1000); //用1000毫秒的时间将class为text的元素的字体大小调整为16px

3. Gunakan CSS untuk mengawal saiz fon

Selain menggunakan JavaScript untuk mengawal saiz fon, anda juga boleh menggunakan gaya CSS untuk melaraskan saiz fon. Anda boleh melaraskan saiz teks dengan mudah dalam halaman web dengan menetapkan atribut saiz fon dalam teg