Bagaimana untuk menyesuaikan fon dalam javascript

JavaScript ialah bahasa pengaturcaraan berorientasikan objek yang boleh menambah banyak kesan interaktif yang berkuasa dan gaya dinamik pada halaman web. Dalam penghasilan halaman web, saiz fon dan gaya fon adalah elemen yang sangat penting. Melaraskan fon melalui JavaScript bukan sahaja menjadikan halaman kelihatan lebih cantik, tetapi juga meningkatkan interaksi pengguna.

1. Tukar saiz fon dan gaya fon dengan mengendalikan CSS

Dalam JavaScript, kami boleh menukar saiz fon dan gaya fon dengan mengendalikan gaya CSS. Tentukan perenggan dalam dokumen HTML:

<p id="changeFont">Hello, Welcome to the world of JavaScript!</p>

Kemudian gunakan kod berikut dalam JavaScript:

document.getElementById("changeFont").style.fontSize="20px";
document.getElementById("changeFont").style.fontFamily="Arial";

Fungsi kod ini adalah untuk memilihnya melalui kaedah getElementById di bawah dokumen objek Perenggan dengan atribut id "changeFont" kemudian menukar saiz fonnya kepada 20 piksel dan gaya fon kepada Arial.

2. Laraskan saiz fon mengikut lebar skrin

Pada peranti mudah alih, disebabkan saiz skrin yang berbeza, saiz fon yang sama akan dipaparkan secara berbeza pada peranti yang berbeza. Oleh itu, ia juga perlu melaraskan saiz fon untuk menyesuaikan diri dengan skrin peranti yang berbeza.

Berikut ialah contoh, kita boleh melaraskan lebar skrin untuk menukar saiz fon melalui JavaScript:

if (screen.width < 768) {
    document.getElementById("changeFont").style.fontSize = "16px";
} else if (screen.width < 992) {
    document.getElementById("changeFont").style.fontSize = "18px";
} else {
    document.getElementById("changeFont").style.fontSize = "20px";
}

Fungsi kod ini ialah apabila lebar skrin kurang daripada 768px , saiz fon ialah 16 piksel ;

Melalui kaedah ini, kami boleh melaraskan saiz fon mengikut saiz skrin peranti yang berbeza, supaya halaman web mempunyai kesan paparan yang baik pada peranti yang berbeza.

3 Tukar gaya fon secara dinamik

Melalui JavaScript, kami juga boleh menukar gaya fon secara dinamik, menjadikan fon lebih interaktif.

Berikut ialah contoh menukar warna fon dan gaya fon melalui JavaScript:

let font = document.getElementById("changeFont");
let colors = ["red", "green", "blue"];
let styles = ["normal", "italic", "oblique", "bold"];

setInterval(function() {
    let randColor = colors[Math.floor(Math.random() * colors.length)];
    let randStyle = styles[Math.floor(Math.random() * styles.length)];
    font.style.color = randColor;
    font.style.fontStyle = randStyle;
}, 1000);

Fungsi kod ini adalah untuk menjana warna fon dan gaya fon rawak setiap saat, dan Gunakannya pada perenggan dengan id "changeFont". Melalui kaedah ini, kami boleh menjadikan fon dinamik dan pelbagai, meningkatkan interaktiviti dan kesan visual halaman web.

Ringkasnya, melaraskan saiz fon dan gaya fon melalui JavaScript bukan sahaja boleh meningkatkan kesan visual halaman web, tetapi juga meningkatkan pengalaman interaktif pengguna. Di samping itu, semasa mereka bentuk halaman web, kita juga perlu memberi perhatian kepada kebolehbacaan dan rupa serta rasa halaman web, dan mengelakkan penggunaan fon dan warna yang mewah secara berlebihan, yang boleh menyebabkan masalah yang tidak perlu kepada pengguna.

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