Comment faire une boîte en javascript

Comment créer une boîte avec JavaScript

Dans le développement Web, la boîte est un élément d'interface utilisateur très courant. Les boîtes peuvent être utilisées pour séparer le contenu et faciliter sa gestion et son organisation. Heureusement, avec JavaScript, nous pouvons créer nos propres boîtes très facilement. Dans cet article, je vais vous expliquer comment créer une boîte de base en utilisant du JavaScript pur et vous montrer comment la personnaliser.

Créer une boîte simple

Commençons par une boîte très basique qui contiendra un titre et du contenu. Nous utiliserons HTML et CSS pour créer l'apparence de la boîte, puis utiliserons JavaScript pour l'ajouter dynamiquement à la page. Voici le HTML que nous voulons créer :

<div id="myBox">
  <h2>这是一个框</h2>
  <p>这里是一些内容。</p>
</div>

Cela créera une simple boîte avec un titre et un contenu. Ensuite, nous pouvons utiliser CSS pour ajouter du style à la boîte :

#myBox {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f8f8;
  width: 300px;
}

#myBox h2 {
  margin-top: 0;
}

#myBox p {
  margin-bottom: 0;
}

Cela ajoutera une bordure, un remplissage, une couleur d'arrière-plan et une largeur fixe à notre boîte, et minimisera l'espace blanc entre le titre et le contenu.

Nous pouvons désormais ajouter des cases à la page en utilisant JavaScript. Nous allons créer un nouvel élément div à l'aide de la fonction document.createElement() et y ajouter du contenu HTML à l'aide de innerHTML. Enfin, nous pouvons l'ajouter à l'élément parent de la page en utilisant la fonction appendChild().

const parentElement = document.querySelector('#container');
const boxElement = document.createElement('div');
boxElement.innerHTML = `
  <div id="myBox">
    <h2>这是一个框</h2>
    <p>这里是一些内容。</p>
  </div>
`;
parentElement.appendChild(boxElement.firstChild);

Cela créera et ajoutera notre élément box à son élément conteneur contenant. Désormais, lorsque la page se charge, nous devrions voir une boîte avec un titre et un contenu.

Boîte personnalisée

Maintenant que nous avons créé une boîte de base, nous pouvons utiliser JavaScript pour y ajouter des fonctionnalités plus dynamiques et personnalisées.

Par exemple, nous pouvons utiliser la fonction querySelector() pour obtenir l'élément titre de la boîte, puis utiliser innerHTML pour modifier le texte du titre :

const titleElement = boxElement.querySelector('h2');
titleElement.innerHTML = '这是一个自定义框';

Nous pouvons également ajouter des boutons qui permettent à l'utilisateur d'afficher ou de masquer la boîte en cliquant sur le bouton. Tout d’abord, nous allons créer deux éléments de bouton et leur ajouter des gestionnaires d’événements de clic. Nous utiliserons ensuite CSS pour contrôler la visibilité de la boîte et ajouter des boutons à la boîte.

const button1 = document.createElement('button');
button1.innerHTML = '显示框';
button1.addEventListener('click', () => {
  boxElement.classList.remove('hidden');
});

const button2 = document.createElement('button');
button2.innerHTML = '隐藏框';
button2.addEventListener('click', () => {
  boxElement.classList.add('hidden');
});

const buttonContainer = document.createElement('div');
buttonContainer.appendChild(button1);
buttonContainer.appendChild(button2);
boxElement.appendChild(buttonContainer);

/* 在CSS中添加以下样式 */
.hidden {
  display: none;
}

Nous pouvons désormais afficher ou masquer notre boîte personnalisée en cliquant sur un bouton.

Conclusion

En utilisant JavaScript, nous pouvons facilement créer de puissantes boîtes personnalisées et ajouter diverses fonctionnalités dynamiques. Cet article fournit une base pour créer des boîtes à partir de zéro, mais vous pouvez utiliser davantage de techniques CSS et JavaScript pour créer des boîtes plus complexes et des fonctionnalités personnalisées. Espérons que cet exemple simple vous aidera à démarrer et à créer vos propres boîtes.

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!