Maison > Article > interface Web > Comment javascript appelle CSS

Comment javascript appelle CSS

PHPzoriginal: 2023-05-16 09:39:07959parcourir

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>

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";

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">

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

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>

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

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>

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

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!

JavaScript css html 对象 dom href 样式表

Déclaration：

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 précédent：Comment Javascript appelle-t-il l'interface CArticle suivant：Comment Javascript appelle-t-il l'interface C

Articles Liés

Voir plus