Bagaimana untuk membuat kotak dalam javascript

Cara membuat kotak dalam JavaScript

Dalam pembangunan web, kotak ialah elemen UI yang sangat biasa. Kotak boleh digunakan untuk memisahkan kandungan dan menjadikannya lebih mudah untuk diurus dan disusun. Nasib baik, dengan JavaScript kami boleh membuat kotak kami sendiri dengan mudah. Dalam artikel ini, saya akan berkongsi cara membuat kotak asas menggunakan JavaScript tulen dan menunjukkan kepada anda cara menyesuaikannya.

Buat kotak ringkas

Mari kita mulakan dengan kotak yang sangat asas yang akan mengandungi tajuk dan beberapa kandungan. Kami akan menggunakan HTML dan CSS untuk mencipta rupa kotak, dan kemudian menggunakan JavaScript untuk menambahkannya secara dinamik pada halaman. Berikut ialah HTML yang ingin kami buat:

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

Ini akan mencipta kotak ringkas dengan tajuk dan kandungan. Seterusnya, kita boleh menggunakan CSS untuk menambah beberapa penggayaan pada kotak:

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

#myBox h2 {
  margin-top: 0;
}

#myBox p {
  margin-bottom: 0;
}

Ini akan menambah jidar, padding, warna latar belakang dan lebar tetap pada kotak kami, dengan ruang putih minimum antara tajuk dan kandungan berubah.

Kini kita boleh menambah kotak pada halaman menggunakan JavaScript. Kami akan mencipta elemen div baharu menggunakan fungsi document.createElement() dan menambah kandungan HTML padanya menggunakan innerHTML. Akhir sekali, kita boleh menambahkannya pada elemen induk pada halaman menggunakan fungsi 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);

Ini akan mencipta dan menambah elemen kotak kami pada elemen bekas yang mengandunginya. Sekarang apabila halaman dimuatkan, kita akan melihat kotak dengan tajuk dan kandungan.

Kotak Tersuai

Sekarang kami telah mencipta kotak asas, kami boleh menggunakan JavaScript untuk menambah kefungsian tersuai yang lebih dinamik padanya.

Sebagai contoh, kita boleh menggunakan fungsi querySelector() untuk mendapatkan elemen tajuk dalam kotak, dan kemudian gunakan innerHTML untuk menukar teks tajuk:

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

Kami juga boleh menambah butang yang membolehkan pengguna mengklik Klik butang untuk menunjukkan atau menyembunyikan kotak. Pertama, kami akan mencipta dua elemen butang dan menambah pengendali acara klik padanya. Kami kemudian akan menggunakan CSS untuk mengawal keterlihatan kotak dan menambah butang pada kotak.

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

Kini kami boleh menunjukkan atau menyembunyikan kotak tersuai kami dengan mengklik butang.

Kesimpulan

Dengan menggunakan JavaScript, kami boleh membuat kotak tersuai yang berkuasa dengan mudah dan menambah pelbagai ciri dinamik. Artikel ini menyediakan asas untuk mencipta kotak dari awal, tetapi anda boleh menggunakan lebih banyak teknik CSS dan JavaScript untuk mencipta kotak yang lebih kompleks dan kefungsian tersuai. Semoga contoh mudah ini akan membantu anda memulakan dan mula mencipta kotak anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk membuat kotak dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!