Maison interface Web Questions et réponses frontales Comment modifier les propriétés CSS dans js

Comment modifier les propriétés CSS dans js

Apr 24, 2023 am 09:09 AM

JavaScript (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>
Copier après la connexion
Copier après la connexion

Code JS :

var myDiv = document.getElementById("myDiv");
Copier après la connexion

ou

var myDiv = document.querySelector("#myDiv");
Copier après la connexion

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.

  1. 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 connexion

    Vous pouvez également modifier plusieurs styles en même temps :

    myDiv.style.backgroundColor = "red";
    myDiv.style.color = "white";
    Copier après la connexion
    .
  2. 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 connexion

    Code JS :

    myDiv.className = "blue-background";
    Copier après la connexion

    Cela 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>
Copier après la connexion
Copier après la connexion

Code JS :

var myDiv = document.getElementById("myDiv");

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Expliquez le concept de chargement paresseux. Expliquez le concept de chargement paresseux. Mar 13, 2025 pm 07:47 PM

Expliquez le concept de chargement paresseux.

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

Comment fonctionne l'algorithme de réconciliation React?

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

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? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

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? 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? Mar 18, 2025 pm 01:44 PM

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. Expliquez le but de chaque méthode de cycle de vie et de son cas d'utilisation. Mar 19, 2025 pm 01:46 PM

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)? Quelles sont les techniques d'optimisation des performances de React (mémoires, division du code, chargement paresseux)? Mar 18, 2025 pm 01:57 PM

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? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

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

See all articles