Comment modifier les propriétés CSS dans js
Apr 24, 2023 am 09:09 AMJavaScript (JS) est un langage de programmation utilisé pour concevoir des pages Web interactives et des sites Web dynamiques. JS peut accéder et exploiter les éléments des pages HTML via DOM (Document Object Model). Cet article explique principalement comment utiliser JS pour modifier les propriétés CSS.
1. Obtenez l'élément
Avant de modifier les propriétés CSS, vous devez obtenir l'élément sur lequel opérer. Vous pouvez obtenir un élément par son ID d'élément à l'aide de la méthode document.getElementById() ou par un sélecteur CSS à l'aide de la méthode document.querySelector().
Comme l'exemple suivant :
Code HTML :
<div id="myDiv">Hello World!</div>
Code JS :
var myDiv = document.getElementById("myDiv");
ou
var myDiv = document.querySelector("#myDiv");
Les deux lignes de code obtiendront l'élément div contenant le texte "Hello World!"
2. Modifier les propriétés CSS
Il existe deux façons de modifier les propriétés CSS : modifier le style directement via l'attribut style, ou modifier le style via l'attribut class.
-
Changez le style directement
Vous pouvez utiliser l'attribut style de l'élément pour changer le style CSS. L'exemple suivant change la couleur d'arrière-plan en rouge :myDiv.style.backgroundColor = "red";
Copier après la connexionVous pouvez également modifier plusieurs styles en même temps :
.myDiv.style.backgroundColor = "red"; myDiv.style.color = "white";
Copier après la connexion -
En modifiant l'attribut de classe
Les attributs peuvent prédéfinir plusieurs styles dans le fichier CSS, puis modifier le style dans JS via l'attribut de classe de l'élément. Prenons l'exemple suivant pour changer la couleur d'arrière-plan en bleu :
Code CSS :.blue-background { background-color: blue; }
Copier après la connexionCode JS :
myDiv.className = "blue-background";
Copier après la connexionCela changera la couleur d'arrière-plan de l'élément div en bleu.
3. Modifications de style déclenchées par un événement
JS peut également déclencher des modifications de style après que l'utilisateur a effectué certaines opérations. Dans l'exemple suivant, lorsque la souris survole l'élément, la couleur du texte sera changée en vert :
Code HTML :
<div id="myDiv">Hello World!</div>
Code JS :
var myDiv = document.getElementById("myDiv"); myDiv.onmouseover = function() { myDiv.style.color = "green"; }; myDiv.onmouseout = function() { myDiv.style.color = "black"; };
Lorsque la souris survolera l'élément, la couleur du texte sera devient vert ; lorsque la souris est éloignée, la couleur du texte redevient noire.
Résumé :
En utilisant JS, vous pouvez facilement modifier le style des éléments HTML pour rendre le site Web plus dynamique et intéressant. En utilisant la méthode ci-dessus, vous pouvez utiliser JS de manière flexible pour modifier le style de conception du site Web afin de rendre la page plus diversifiée.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Expliquez le concept de chargement paresseux.

Comment fonctionne l'algorithme de réconciliation React?

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?

Comment fonctionne le currying en JavaScript et quels sont ses avantages?

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?

Expliquez le but de chaque méthode de cycle de vie et de son cas d'utilisation.

Quelles sont les techniques d'optimisation des performances de React (mémoires, division du code, chargement paresseux)?

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
