Comment javascript appelle CSS-Questions et réponses frontales-php.cn

Comment javascript appelle CSS

PHPz

Libérer： 2023-05-16 09:39:07

original

1002 Les gens l'ont consulté

Dans la conception et le développement de sites Web, JavaScript et CSS sont utilisés ensemble pour obtenir une variété d'effets visuels époustouflants et de fonctionnalités interactives. La manière dont JavaScript appelle CSS est une question courante, qui sera décrite en détail ci-dessous.

1. Styles en ligne

Les styles en ligne peuvent être directement appliqués à l'attribut de style des balises HTML, comme indiqué ci-dessous :

<p style="color: red; font-size: 16px;">这是一个红色的段落</p>

Copier après la connexion

En JavaScript, les styles en ligne peuvent être modifiés en modifiant l'attribut de style de l'élément. Par exemple :

let p = document.querySelector("p");
p.style.color = "blue";
p.style.fontSize = "20px";

Copier après la connexion

Cela transformera le paragraphe rouge ci-dessus en un paragraphe bleu avec une taille de police de 20 px.

2. Feuille de style externe

Une feuille de style externe est une méthode permettant de placer une collection de règles CSS dans un fichier séparé en associant le fichier à un document HTML, les mêmes règles de style peuvent être réutilisées. En JavaScript, une feuille de style peut être modifiée en changeant l'attribut href de l'élément du document lié à la feuille de style. Par exemple :

<link rel="stylesheet" href="styles.css">

Copier après la connexion

let link = document.querySelector("link");
link.href = "new-styles.css";

Copier après la connexion

Cela change la feuille de style du document lié à styles.css en une feuille de style liée à new-styles.css.

3. Feuilles de style internes

Les feuilles de style internes sont une méthode permettant de placer une collection de règles CSS entre les balises head ou body d'un document HTML. En JavaScript, les feuilles de style internes peuvent être modifiées en modifiant directement l'attribut de style du document. Par exemple :

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
   }
  </style>
</head>

<body>
  <p>这是一个红色的段落</p>
</body>

Copier après la connexion

let style = document.querySelector("style");
style.innerHTML = "p { color: blue; font-size: 20px; }";

Copier après la connexion

Cela transformera le paragraphe rouge ci-dessus en un paragraphe bleu avec une taille de police de 20 px.

4. Nom de classe

Un nom de classe est un nom qui définit les règles de style pour certains éléments. En JavaScript, une ou plusieurs classes peuvent être ajoutées ou supprimées en modifiant l'attribut classList d'un élément. Par exemple :

<style>
  .red {
    color: red;
  }
  .large {
    font-size: 20px;
  }
</style>

<p class="red">这是一个红色的段落</p>

Copier après la connexion

let p = document.querySelector("p");
p.classList.add("large");
p.classList.remove("red");

Copier après la connexion

Cela transformera le paragraphe rouge ci-dessus en un paragraphe avec une taille de police de 20 px.

Résumé :

JavaScript peut appeler CSS en utilisant diverses méthodes, notamment les styles en ligne, les feuilles de style externes, les feuilles de style internes, les noms de classe, etc. Ces méthodes peuvent exploiter directement le modèle d'objet de document (DOM) via JavaScript pour obtenir des effets visuels et des fonctions d'interactivité. La maîtrise de ces compétences peut vous aider à mieux gérer et contrôler le style et le comportement des pages Web.

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!