Bagaimana untuk menambah titik hitam sebelum perenggan JavaScript

Dalam reka bentuk dan pembangunan web, kadangkala kita perlu menambah titik hitam kecil sebelum teks sebagai pengecam senarai. Titik hitam kecil ini adalah apa yang sering kami panggil "titik peluru" (titik peluru) boleh menjadikan senarai kami lebih jelas dan cantik, dan membantu pembaca membaca dan memahami kandungan artikel dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk menambah simbol titik.

1. Tambahkan simbol titik dalam HTML

Dalam HTML, kita boleh menggunakan senarai tidak tertib untuk menambah simbol titik. Setiap item dalam senarai tidak tertib didahului dengan titik Berikut ialah contoh:

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

Senarai tidak tersusun ini akan muncul sebagai:

• Item pertama
• Item kedua.
• Item ketiga

Walau bagaimanapun, menggunakan senarai tidak tersusun untuk menambah simbol titik mungkin dipengaruhi oleh gaya dan reka letak CSS, jadi kami JavaScript boleh digunakan untuk mencapai kesan yang lebih fleksibel dan boleh disesuaikan.

2. Gunakan JavaScript untuk menambah simbol titik

Dalam JavaScript, kami boleh mencipta fungsi boleh guna semula untuk menambah simbol titik. Berikut ialah contoh kod ringkas:

function addBulletPoint(element) {
  var bullet = document.createElement('span');
  bullet.innerHTML = '• '; // HTML中的圆点符号
  element.insertBefore(bullet, element.firstChild);
}

Dalam kod di atas, kami menggunakan kaedah createElement untuk mencipta elemen span dan menetapkan HTML dalamannya kepada simbol titik (entiti HTML•). Seterusnya, kami memasukkan elemen ini sebelum elemen anak pertama elemen sasaran, iaitu memasukkan titik hitam kecil sebelum teks. Fungsi ini boleh dipanggil dengan menghantar ID elemen sasaran:

addBulletPoint(document.getElementById('list-item-1'));

Dengan memanggil fungsi addBulletPoint berulang kali, kita boleh menambah simbol titik pada berbilang elemen.

3. Cantikkan simbol titik

Jika anda ingin menjadikan simbol titik kelihatan lebih cantik, anda boleh menggunakan gaya CSS untuk melaraskan penampilannya. Contohnya, anda boleh menambah warna pada simbol titik, menetapkan saiz fon, mengubah suai jarak dan banyak lagi. Berikut ialah beberapa gaya CSS yang boleh anda rujuk:

.bullet-point {
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  margin-right: 5px;
}

Anda boleh menggunakan gaya ini pada elemen rentang simbol titik yang kami tambahkan:

function addBulletPoint(element) {
  var bullet = document.createElement('span');
  bullet.innerHTML = '• '; // HTML中的圆点符号
  bullet.className = 'bullet-point'; // 添加CSS样式
  element.insertBefore(bullet, element.firstChild);
}

Dengan cara ini, simbol titik kami akan Menjadi lebih cantik dan menarik.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan JavaScript untuk menambah simbol titik dan cara mencantikkannya melalui gaya CSS. Menambah simbol titik boleh menjadikan artikel dan kandungan kami lebih jelas dan lebih mudah dibaca, di samping meningkatkan estetika halaman. Jika anda membuat laman web atau artikel, petua ini akan sangat berguna.

Atas ialah kandungan terperinci Bagaimana untuk menambah titik hitam sebelum perenggan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!