interface Webjs tutorielComment modifier l'épaisseur de la police du texte en utilisant JavaScript ?Comment modifier l'épaisseur de la police du texte en utilisant JavaScript ?
L'utilisation de JavaScript est l'un des moyens les plus connus de modifier l'épaisseur de la police de n'importe quel texte sur une page Web. Nous pouvons créer des applications interactives en utilisant des éléments JavaScript et HTML. L’épaisseur de la police fait référence à l’épaisseur des caractères. Dans cet article, nous apprendrons comment modifier l'épaisseur de la police du texte à l'aide de JavaScript.
Utiliser l'attribut style fontWeight
Voyons comment modifier l'épaisseur de la police d'un seul élément, tel qu'un paragraphe ou un titre. Pour ce faire nous utiliserons la propriété "style.fontWeight" de l'élément. Cette propriété est un objet qui contient toutes les propriétés CSS et leurs valeurs correspondantes.
Grammaire
Nous pouvons modifier l'épaisseur de la police du texte en utilisant la syntaxe suivante :
document.getElementById("myId").style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"
Ici, nous pouvons spécifier "normal", "plus léger", "gras", "gras" ou une valeur comprise entre 100 et 900 pour la propriété fontWeight.
Par conséquent, nous pouvons attribuer une valeur à la propriété fontWeight de deux manières, à savoir des nombres et des mots-clés.
Exemple : attribuer un numéro à la propriété fontWeight
Pour modifier le poids de la police d'un élément HTML à l'aide de cette méthode, le nombre doit être défini entre 100 et 900. Examinons un exemple d'utilisation de nombres pour modifier l'épaisseur de la police d'un élément de titre.
<html>
<body>
<h2 id="Change-Font-Weight-of-HTML-Element-in-JavaScript">Change Font Weight of HTML Element in JavaScript</h2>
<button onclick="myfuction()">Click to change font weight to 300</button>
<script>
function myfuction(){
const heading = document.getElementById("myHeading");
heading.style.fontWeight = 300;
}
</script>
</body>
</html>
Comme nous pouvons le voir dans l'exemple, nous sélectionnons ici l'élément de titre avec l'ID "myHeading" à l'aide de la méthode getElementById puis définissons la propriété font-weight de l'objet sur 300, nous définirons le texte de l'objet sur 300 . L'élément titre est plus clair que la normale.
Exemple : Attribuez des mots-clés à la propriété fontWeight
Pour modifier l'épaisseur de la police d'un élément HTML en utilisant cette méthode, nous pouvons utiliser Normal, Bold ou Bold. Définir font-weight sur normal correspond à définir font-weight sur 400, et définir font-weight sur bold correspond à définir font-weight sur 700.
<html>
<body>
<div id="myDiv">
<p id="myParagraph">
Change Font Weight of HTML Element using
keywords Method
</p>
</div>
<button onclick="myfuction()">Click to change font weight to bolder</button>
<script>
function myfuction(){
const paragraph = document.getElementById("myParagraph");
paragraph.style.fontWeight = "bolder";
}
</script>
</body>
</html>
Comme nous pouvons le voir dans l'exemple, nous utilisons ici la méthode getElementById pour sélectionner l'élément de paragraphe avec l'ID "myParagraph", puis définissons la propriété font-weight de l'objet sur "bolder", que nous définissons sur "bolder". rendre le texte de l'élément de paragraphe plus gras qu'auparavant.
Modifier l'épaisseur de la police de plusieurs éléments
Supposons que si vous souhaitez modifier l'épaisseur de police de plusieurs éléments à la fois, comme tous les paragraphes d'un document, nous pouvons alors utiliser la méthode "querySelectorAll". Il renvoie une liste de nœuds de tous les éléments HTML correspondant au sélecteur CSS donné.
Exemple : utilisation de la méthode forEach
Regardons un exemple d'utilisation de la méthode forEach pour modifier l'épaisseur de la police de tous les éléments d'un paragraphe dans un document.
<html>
<body>
<div id="myDiv">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
paragraph.style.fontWeight = 700;
});
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, nous utilisons "querySelectorAll" pour sélectionner tous les éléments d'un paragraphe dans un document HMTL. Nous utilisons ensuite la méthode forEach de la liste de nœuds pour parcourir tous les paragraphes et définir leur poids de police sur 700.
La méthode "forEach" est un moyen utile de parcourir une liste de nœuds. Cela nous permet d'exécuter une fonction sur chaque élément de la liste. Dans cet exemple, nous définissons la propriété "fontWeight" de l'objet style de chaque élément de paragraphe sur 700.
Exemple : Utilisation de la méthode de boucle for-of
Regardons un autre exemple de modification de l'épaisseur de police de plusieurs éléments dans un document à l'aide de la méthode de boucle for-of. Une boucle for-of est une méthode traditionnelle ou une autre façon de parcourir une liste de nœuds.
<html>
<body>
<h3 id="Example-of-Font-Weight-Text-Changing-for-of-method">Example of Font-Weight Text Changing for-of method</h3>
<div id="myDiv">
<p>First Paragraph </p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
for (const paragraph of paragraphs) {
paragraph.style.fontWeight = 700;
}
}
</script>
</body>
</html>
Dans cet exemple, nous utilisons une boucle « for-of » pour parcourir un paragraphe et définir son poids de police sur 700. La différence entre la boucle for et la boucle for-of est que la boucle for-of nous permet d'accéder directement aux éléments de la liste de nœuds, alors que dans la boucle for nous accédons à son index.
Conclusion
Dans cet article, nous avons démontré avec succès comment modifier l'épaisseur de la police du texte avec un exemple. Nous voyons ici différents exemples d'utilisation de JavaScript pour modifier l'épaisseur de police d'un seul élément et de plusieurs éléments. Nous avons écrit deux exemples différents en utilisant la méthode forEach et la méthode for-of pour plusieurs éléments.
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!
Au-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AMLes applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.
Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AMJ'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant
Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AMCet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles
JavaScript: Explorer la polyvalence d'un langage WebApr 11, 2025 am 12:01 AMJavaScript est le langage central du développement Web moderne et est largement utilisé pour sa diversité et sa flexibilité. 1) Développement frontal: construire des pages Web dynamiques et des applications à une seule page via les opérations DOM et les cadres modernes (tels que React, Vue.js, Angular). 2) Développement côté serveur: Node.js utilise un modèle d'E / S non bloquant pour gérer une concurrence élevée et des applications en temps réel. 3) Développement des applications mobiles et de bureau: le développement de la plate-forme multiplateuse est réalisé par réact noral et électron pour améliorer l'efficacité du développement.
L'évolution de JavaScript: tendances actuelles et perspectives d'avenirApr 10, 2025 am 09:33 AMLes dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Démystifier javascript: ce qu'il fait et pourquoi c'est importantApr 09, 2025 am 12:07 AMJavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Python ou JavaScript est-il meilleur?Apr 06, 2025 am 12:14 AMPython est plus adapté à la science des données et à l'apprentissage automatique, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python est connu pour sa syntaxe concise et son écosystème de bibliothèque riche, et convient à l'analyse des données et au développement Web. 2. JavaScript est le cœur du développement frontal. Node.js prend en charge la programmation côté serveur et convient au développement complet.
Comment installer JavaScript?Apr 05, 2025 am 12:16 AMJavaScript ne nécessite pas d'installation car il est déjà intégré à des navigateurs modernes. Vous n'avez besoin que d'un éditeur de texte et d'un navigateur pour commencer. 1) Dans l'environnement du navigateur, exécutez-le en intégrant le fichier HTML via des balises. 2) Dans l'environnement Node.js, après avoir téléchargé et installé Node.js, exécutez le fichier JavaScript via la ligne de commande.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft
