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