afficher masquer javascript

Titre : Maîtriser les compétences front-end - Afficher et masquer Javascript

Dans le développement front-end, afficher et masquer est une fonction fréquemment utilisée. Par exemple, nous devons souvent afficher ou masquer certains éléments sous certaines conditions pour obtenir des effets interactifs ou optimiser l’expérience de la page. Cet article présentera la méthode d'implémentation d'affichage et de masquage du code Javascript pour maîtriser les compétences front-end.

1. Afficher et masquer via CSS

La façon la plus simple de l'implémenter est d'afficher et de masquer des éléments via l'attribut display de CSS.

Lorsque l'élément doit être affiché, définissez sa valeur d'attribut d'affichage sur block ou inline-block :

display: block | inline-block;

Lorsque l'élément doit être masqué, définissez sa valeur d'attribut d'affichage Pour personne :

display: none;

Mais cette approche sacrifie une certaine flexibilité. Si l'on souhaite simplement contrôler la transparence ou la position de l'élément sans le masquer complètement, alors cette méthode semble un peu inadéquate.

2. Afficher et masquer via jQuery

Le framework jQuery fournit des méthodes spécifiques pour afficher et masquer. Grâce aux méthodes fadeIn() et fadeOut() de jQuery, nous pouvons facilement réaliser l'affichage en dégradé et le masquage des éléments :

// 显示元素
$(selector).fadeIn(speed,callback);

// 隐藏元素
$(selector).fadeOut(speed,callback);

où selector est le sélecteur de l'élément à contrôler pour être affiché et masqué. La vitesse est la vitesse du gradient. callback est la fonction de rappel appelée lorsque le dégradé est terminé.

De plus, jQuery fournit également la méthode toggle(), qui peut basculer en fonction de l'état de l'élément, c'est-à-dire le masquer lorsque l'élément est affiché et l'afficher lorsque l'élément est masqué :

$(selector).toggle(speed,callback);

# 🎜🎜#3. Afficher et masquer via Javascript natif

Lorsque nous devons éviter d'utiliser des frameworks tels que jQuery, nous devons généralement utiliser du Javascript natif pour afficher et masquer des éléments. Nous pouvons le faire en modifiant le style de l'élément ou en définissant directement la valeur de l'attribut de visibilité de l'élément.

Méthode 1 : Modifier le style de l'élément

On peut afficher et masquer des éléments en modifiant le style de l'élément. Lorsque l'élément doit être affiché, nous définissons la valeur de l'attribut d'affichage de son style sur block ou inline-block :

// 显示元素
document.getElementById("element_id").style.display = "block | inline-block";

Lorsque l'élément doit être masqué, définissez la valeur de l'attribut d'affichage de son style sur none:#🎜 🎜#

// 隐藏元素
document.getElementById("element_id").style.display = "none";

Méthode 2 : Définir l'attribut de visibilité de l'élément

Une autre méthode consiste à afficher et masquer l'élément en définissant l'attribut de visibilité de l'élément. Cette approche préserve la taille et la position de l'élément.

Lorsque l'élément doit être affiché, définissez sa valeur d'attribut de visibilité sur visible :

// 显示元素
document.getElementById("element_id").style.visibility = "visible";

Lorsque l'élément doit être masqué, définissez sa valeur d'attribut de visibilité sur caché :# 🎜🎜 #

// 隐藏元素
document.getElementById("element_id").style.visibility = "hidden";

Il est à noter que lorsqu'on utilise l'attribut de visibilité pour masquer un élément, l'élément occupe toujours sa position sur la page.

4. Afficher et masquer via React

Dans React, nous utilisons généralement l'état du composant pour contrôler l'affichage et le masquage des éléments. Lorsque l'état du composant change, React restituera automatiquement la page pour afficher et masquer les éléments.

Par exemple, le code suivant affiche et masque les éléments en cliquant sur un bouton :

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }
  
  toggleElement = () => {
    this.setState({
      showElement: !this.state.showElement
    });
  }
  
  render() {
    const { showElement } = this.state;
    return (
      <div>
        <button onClick={this.toggleElement}>Toggle Element</button>
        {showElement && <div>Element Content</div>}
      </div>
    );
  }
}

Dans le code ci-dessus, showElement est l'état utilisé pour contrôler l'affichage et le masquage des éléments . Lorsque vous cliquez sur le bouton, la méthode toggleElement() déclenche un changement d'état et restitue la page. Lorsque showElement est vrai, l'élément sera affiché sur la page ; lorsque showElement est faux, l'élément sera masqué.

Voici plusieurs méthodes d'implémentation d'affichage et de masquage courantes. Que vous utilisiez Javascript natif, jQuery ou React, tant que vous choisissez la méthode appropriée pour l'implémenter, vous pouvez afficher l'élément en cas de besoin. et lorsqu'il n'est pas nécessaire, il est masqué pour améliorer l'interaction avec la page et l'expérience utilisateur.

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!