Comment ajuster la taille de la police en javascript

JavaScript est un langage de programmation largement utilisé qui peut être utilisé pour implémenter divers effets et fonctions interactifs dans des pages Web. Parmi eux, l’ajustement de la taille de la police est une opération courante sur les pages Web. Cet article présentera comment JavaScript ajuste la taille du texte dans les pages Web.

1. Utilisez les opérations DOM pour ajuster la taille de la police

DOM (Document Object Model) est une partie importante de JavaScript et est utilisé pour manipuler le contenu des pages Web. Grâce au DOM, nous pouvons facilement trouver l'élément dont la taille de police doit être modifiée, puis ajuster sa taille à l'aide de la propriété .style.fontSize.

Tout d'abord, nous devons trouver l'élément qui doit être redimensionné. L'objet élément qui doit être modifié peut être obtenu par identifiant ou classe, par exemple :

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

Grâce à la méthode getElementById et à la méthode getElementsByClassName en JavaScript, nous pouvons obtenir ces deux objets élément :

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

Ensuite, nous pouvons passer .style Attribut .fontSize pour modifier la taille de la police :

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

De cette façon, vous pouvez facilement ajuster la taille de la police.

2. Utilisez la bibliothèque jQuery pour ajuster la taille de la police

jQuery est une bibliothèque JavaScript populaire qui simplifie les étapes de diverses opérations et rend la programmation JavaScript plus facile et plus concise. L'utilisation de la bibliothèque jQuery pour ajuster la taille de la police réduit la quantité de code et est compatible avec tous les navigateurs.

Avant d'utiliser la bibliothèque jQuery, vous devez introduire la bibliothèque jQuery dans la page Web :

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

Ensuite, nous pouvons utiliser le sélecteur dans jQuery pour obtenir les éléments qui doivent modifier la taille de la police, comme indiqué ci-dessous :

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

Utilisation de la bibliothèque jQuery non seulement Vous pouvez utiliser la méthode .css pour modifier la taille de la police, mais vous pouvez également utiliser la méthode .animate pour obtenir des effets d'animation plus magnifiques. Par exemple :

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

3. Utilisez CSS pour contrôler la taille de la police

En plus d'utiliser JavaScript pour contrôler la taille de la police, vous pouvez également utiliser des styles CSS pour ajuster la taille de la police. Vous pouvez facilement ajuster la taille du texte dans une page Web en définissant l'attribut font-size dans la balise c9ccee2e6ea535a969eb3f532ad9fe89 ou dans un fichier CSS externe.

Lors de l'utilisation de CSS, nous pouvons obtenir l'élément qui doit être redimensionné via le sélecteur de classe ou le sélecteur d'élément, puis utiliser l'attribut font-size pour ajuster sa taille.

Par exemple, le style CSS suivant définit la taille de police de tous les éléments p à 16px :

p {
  font-size: 16px;
}

Si vous souhaitez uniquement définir la taille de police de l'élément p avec le paragraphe id à 20px, vous pouvez utiliser le style CSS suivant :

#paragraph {
  font-size: 20px;
}

En utilisant des styles CSS pour contrôler la taille de la police, vous pouvez éviter d'utiliser les bibliothèques JavaScript ou jQuery pour obtenir le même effet, réduisant ainsi la quantité de code et le temps d'exécution du programme.

Résumé

Ajuster la taille de la police sur une page Web est l'une des opérations courantes, et différentes méthodes peuvent obtenir le même effet. JavaScript peut utiliser les opérations DOM, la bibliothèque jQuery et les styles CSS pour contrôler la taille de la police. Les développeurs peuvent choisir la méthode la plus appropriée en fonction de leurs besoins. Quelle que soit la méthode choisie, l’objectif ultime est d’offrir aux utilisateurs une meilleure expérience de lecture.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!