Maison > Article > interface Web > Cliquez pour changer le CSS

Cliquez pour changer le CSS

WBOYoriginal: 2023-05-27 12:00:37652parcourir

De nombreuses personnes ayant été exposées à la programmation HTML et CSS utiliseront JavaScript pour interagir avec les pages Web. Parmi eux, les événements de clic constituent la méthode d’interaction la plus courante. Grâce aux événements de clic, nous pouvons opérer sur des éléments de la page Web, comme changer le style de l'élément (CSS), ou déclencher certaines fonctions, etc. Voyons ensuite comment modifier le CSS via des événements de clic.

1. Connaissances de base en HTML et CSS

Avant de comprendre comment les événements de clic modifient le CSS, nous devons maîtriser les connaissances de base en HTML et CSS. HTML est un langage de balisage principalement utilisé pour créer des pages Web. Il se compose d'une série de balises (Tags). Les balises enveloppent divers éléments des pages Web, tels que du texte, des images, des liens, etc. Par exemple, le code HTML suivant :

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
</body>
</html>

Dans le code ci-dessus, 8b05045a5be5764f313ed5b9168a17e6 déclare que le type de fichier est HTML et 100db36a723c770d327fc0aef2ce13b1 enveloppe la page Web entière, la balise 93f0f5c25f18dab9d176bd4f6de5d30e contient certaines métadonnées de la page Web, telles que le titre, le style, etc. La balise b2386ffb911b14667cb8f0f91ea547a7 définit le titre de la page Web, et la balise c9ccee2e6ea535a969eb3f532ad9fe89 définit le style de l'élément h1 (la couleur de la police est rouge). La balise 6c04bd5ca3fcae76e30b72ad730ca86d contient le contenu principal de la page Web, y compris une balise 4a249f0d628e2318394fd9b75b4636b1, qui affiche le texte "Bienvenue sur ma page Web". 8b05045a5be5764f313ed5b9168a17e6声明文件类型为HTML，100db36a723c770d327fc0aef2ce13b1包裹整个网页，93f0f5c25f18dab9d176bd4f6de5d30e标签中包含一些网页的元数据，比如标题、样式等。b2386ffb911b14667cb8f0f91ea547a7标签定义网页的标题，c9ccee2e6ea535a969eb3f532ad9fe89标签中定义了h1元素的样式（字体颜色为红色）。而6c04bd5ca3fcae76e30b72ad730ca86d标签中则是网页的主要内容，包括一个4a249f0d628e2318394fd9b75b4636b1标签，其中显示了“欢迎来到我的网页”的文本。

CSS（Cascading Style Sheets）是一种样式表语言，主要用于定义和控制HTML中各种元素的样式。我们可以在HTML文档头部的c9ccee2e6ea535a969eb3f532ad9fe89标签中写入CSS代码，也可以将样式代码写入外部的CSS文件中。在上面的代码中，我们已经使用了内部样式来定义了h1元素的字体颜色。

二、点击事件的基础知识

点击事件是JavaScript中最常用的交互方式之一。当用户在网页上点击某个元素时，该元素就会触发“点击事件”，随后我们可以通过编写JavaScript代码来对该元素进行处理。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        h1 {
            color: red;
            cursor: pointer;
        }
    </style>
    <script>
        function changeColor() {
            document.getElementsByTagName("h1")[0].style.color = "blue";
        }
    </script>
</head>
<body>
    <h1 onclick="changeColor()">点击我改变颜色</h1>
</body>
</html>

在上面的代码中，我们首先给h1元素加上了一个cursor: pointer的样式，这样鼠标悬浮在h1元素上时就会变成手型，提示用户可以点击该元素。随后，在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中写入了一个名为changeColor()的函数，该函数的作用是点击h1元素时将h1元素的字体颜色改变为蓝色。最后，在4a249f0d628e2318394fd9b75b4636b1标签中加入了onclick属性，该属性的值是我们刚才定义的changeColor()函数，这样点击h1元素时就会触发changeColor()函数，实现了改变颜色的功能。

三、通过点击事件改变CSS

通过上面的示例代码，我们可以看出通过JavaScript的点击事件可以对HTML元素进行操作，比如改变样式。下面再给出一个通过点击事件改变CSS的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        h1 {
            color: red;
            cursor: pointer;
        }
        .changeColor {
            color: blue;
        }
    </style>
    <script>
        function addClass() {
            document.getElementsByTagName("h1")[0].classList.add("changeColor");
        }
        function removeClass() {
            document.getElementsByTagName("h1")[0].classList.remove("changeColor");
        }
    </script>
</head>
<body>
    <h1 onclick="addClass()">点击变蓝</h1>
    <h1 onclick="removeClass()">点击变红</h1>
</body>
</html>

在上面的代码中，我们首先定义了两个样式，一个是h1元素的初始样式，另一个是h1元素被点击后的样式，其中.changeColor是一个类选择器，用于添加和删除h1元素的样式。随后，我们定义了两个函数addClass()和removeClass()，分别用于添加和删除h1元素的样式。在6c04bd5ca3fcae76e30b72ad730ca86d标签中，我们分别添加了两个h1元素，并通过给onclick属性绑定addClass()和removeClass()

CSS (Cascading Style Sheets) est un langage de feuille de style, principalement utilisé pour définir et contrôler les styles de divers éléments en HTML. Nous pouvons écrire du code CSS dans la balise c9ccee2e6ea535a969eb3f532ad9fe89 en tête du document HTML, ou nous pouvons écrire le code de style dans un fichier CSS externe. Dans le code ci-dessus, nous avons utilisé des styles internes pour définir la couleur de police de l'élément h1.

2. Connaissance de base des événements de clic

Les événements de clic sont l'une des méthodes d'interaction les plus couramment utilisées en JavaScript. Lorsqu'un utilisateur clique sur un élément d'une page Web, l'élément déclenchera un « événement de clic », puis nous pourrons traiter l'élément en écrivant du code JavaScript. Voici un exemple de code simple : 🎜rrreee🎜Dans le code ci-dessus, nous ajoutons d'abord un style cursor: pointer à l'élément h1, de sorte que lorsque la souris survole l'élément h1, il changement En forme de main, l'utilisateur est invité à cliquer sur l'élément. Par la suite, une fonction nommée changeColor() a été écrite dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a. La fonction de cette fonction est de changer la couleur de la police de l'élément h1 lorsque le h1. l’élément est cliqué. Passe au bleu. Enfin, l'attribut onclick est ajouté à la balise 4a249f0d628e2318394fd9b75b4636b1. La valeur de cet attribut est la fonction changeColor() que nous venons de définir. , donc lorsque l'on clique sur l'élément h1, la fonction changeColor() est déclenchée, réalisant la fonction de changement de couleur. 🎜🎜3. Changer le CSS via des événements de clic🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons voir que les éléments HTML peuvent être exploités via des événements de clic JavaScript, tels que la modification des styles. Voici un autre exemple de code pour modifier le CSS via des événements de clic : 🎜rrreee🎜 Dans le code ci-dessus, nous définissons d'abord deux styles, l'un est le style initial de l'élément h1 et l'autre est le style après le clic sur l'élément h1. .changeColor est un sélecteur de classe utilisé pour ajouter et supprimer des styles d'éléments h1. Par la suite, nous avons défini deux fonctions addClass() et removeClass(), qui sont utilisées respectivement pour ajouter et supprimer des styles d'éléments h1. Dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d, nous avons ajouté respectivement deux éléments h1 et lié addClass() et removeClass() réalise l'effet de cliquer pour changer le style de l'élément h1. 🎜🎜Résumé : 🎜🎜Grâce à l'exemple de code ci-dessus, nous pouvons apprendre à modifier le CSS via des événements de clic pour obtenir des effets interactifs sur les pages Web. Bien entendu, il ne s’agit que d’une opération de base. En fait, des effets interactifs plus complexes peuvent être obtenus grâce à JavaScript. Par conséquent, nous devons continuer à apprendre et à maîtriser davantage de compétences et de connaissances en JavaScript afin de mieux obtenir des effets d'interaction avec les 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!

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：mot en htmlArticle suivant：mot en html

Articles Liés

Voir plus