So erstellen Sie eine Box in Javascript

So erstellen Sie eine Box mit JavaScript

In der Webentwicklung ist die Box ein sehr häufiges UI-Element. Mithilfe von Boxen können Inhalte getrennt und einfacher verwaltet und organisiert werden. Glücklicherweise können wir mit JavaScript sehr einfach unsere eigenen Boxen erstellen. In diesem Artikel erkläre ich Ihnen, wie Sie mit reinem JavaScript eine einfache Box erstellen und wie Sie diese anpassen.

Erstellen Sie eine einfache Box

Beginnen wir mit einer sehr einfachen Box, die einen Titel und einige Inhalte enthält. Wir verwenden HTML und CSS, um das Erscheinungsbild der Box zu erstellen, und fügen sie dann mithilfe von JavaScript dynamisch zur Seite hinzu. Hier ist der HTML-Code, den wir erstellen möchten:

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

Dadurch wird eine einfache Box mit einem Titel und Inhalt erstellt. Als Nächstes können wir CSS verwenden, um der Box etwas Stil zu verleihen:

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

#myBox h2 {
  margin-top: 0;
}

#myBox p {
  margin-bottom: 0;
}

Dadurch werden unserer Box ein Rahmen, eine Polsterung, eine Hintergrundfarbe und eine feste Breite hinzugefügt und der Leerraum zwischen Titel und Inhalt minimiert.

Jetzt können wir der Seite mithilfe von JavaScript Boxen hinzufügen. Wir erstellen ein neues div-Element mit der Funktion document.createElement() und fügen ihm mithilfe von innerHTML HTML-Inhalte hinzu. Schließlich können wir es mit der Funktion appendChild() zum übergeordneten Element auf der Seite hinzufügen.

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

Dadurch wird unser Box-Element erstellt und zu seinem enthaltenden Containerelement hinzugefügt. Wenn die Seite nun geladen wird, sollten wir ein Feld mit einem Titel und Inhalt sehen.

Benutzerdefinierte Box

Da wir nun eine Basisbox erstellt haben, können wir mithilfe von JavaScript dynamischere, benutzerdefinierte Funktionen hinzufügen.

Zum Beispiel können wir die Funktion querySelector() verwenden, um das Titelelement der Box abzurufen, und dann innerHTML verwenden, um den Titeltext zu ändern:

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

Wir können auch Schaltflächen hinzufügen, mit denen der Benutzer die Box ein- oder ausblenden kann indem Sie auf die Schaltfläche klicken. Zuerst erstellen wir zwei Schaltflächenelemente und fügen ihnen Klickereignishandler hinzu. Anschließend verwenden wir CSS, um die Sichtbarkeit der Box zu steuern und Schaltflächen zur Box hinzuzufügen.

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

Jetzt können wir unsere benutzerdefinierte Box mit einem Klick ein- oder ausblenden.

Fazit

Durch die Verwendung von JavaScript können wir ganz einfach leistungsstarke benutzerdefinierte Boxen erstellen und verschiedene dynamische Funktionen hinzufügen. Dieser Artikel bietet eine Grundlage für die Erstellung von Boxen von Grund auf. Sie können jedoch weitere CSS- und JavaScript-Techniken verwenden, um komplexere Boxen und benutzerdefinierte Funktionen zu erstellen. Hoffentlich hilft Ihnen dieses einfache Beispiel beim Einstieg und beim Erstellen Ihrer eigenen Boxen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Box in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!